CSS 애니메이션: 웹 페이지를 살리다

안녕하세요, 미래의 웹 마법사 여러분! 오늘 우리는 CSS 애니메이션의 마법의 세상으로 뛰어들어 보겠습니다. 이 튜토리얼의 끝을 맞아서, 여러분은 웹 페이지에서 디지털 프레드 아스타이어처럼 요소들을 춤추게 만들 수 있을 것입니다. 그러면 가상의 춤鞋를 신고, 시작해 보겠습니다!

CSS 애니메이션은 무엇인가?

CSS 애니메이션은 웹 페이지의 정적 요소들에게 생명을 주는 것과 같습니다. 사용자가 마우스를 올리면 버튼이 두드러지게 빛나거나, 페이지가 로드될 때 로고가 회전하는 상상을 해보세요. 이것이 CSS 애니메이션의 힘입니다! JavaScript나 Flash의 복잡성 없이 CSS 속성 값을 주어진 시간 동안 변화시키어 움직임과 시각적인 흥미를 만들 수 있습니다.

@keyframes 규칙

CSS 애니메이션의 핵심은 @keyframes 규칙입니다. 여기서 여러분은 애니메이션의 단계를 정의합니다.

@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

이 예제에서 우리는 "bounce"라는 애니메이션을 만들었습니다. 0%(시작점)에서 요소는 원래 위치에 있습니다. 50%(애니메이션의 중간)에서는 20픽셀 위로 이동합니다. 100%(끝점)에서는 원래 위치로 돌아갑니다.

애니메이션 지연 속성

occasionally, you want your animation to wait before starting. That's where the animation-delay property comes in handy.

.delayed-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-delay: 2s;
}

이 CSS는 "bounce" 애니메이션을 "delayed-bounce" 클래스를 가진 모든 요소에 적용합니다. 애니메이션은 1초 동안 지속되지만, 페이지가 로드된 후 2초가 지나서才开始합니다.

애니메이션 반복 횟수 설정

기본적으로 애니메이션은 한 번 실행하고 멈춥니다. 하지만 에너자이저 Bunny처럼 계속 움직이고 싶다면? 그때 animation-iteration-count이 나오는 것입니다.

.infinite-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

이제 우리의 뛰는 요소는 영원히 계속 뛰게 됩니다. 사용자가 페이지를 닫을 때까지, 그 중 하나가 먼저 오면 그때까지!

애니메이션 방향 속성

occasionally, you might want your animation to run backwards, or alternate between forwards and backwards. The animation-direction property lets you do just that.

.alternate-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

이렇게 하면 우리 요소는 지속적으로 위로와 아래로 뛰게 됩니다. 영원한 운동 기계처럼 (만약 우리가 이를 청정 에너지로 활용할 수 있다면!).

애니메이션 타이밍 기능

animation-timing-function 속성을 통해 애니메이션의 속도를 제어할 수 있습니다. 마치 여러분 자신의 디지털 오케스트라의 지휘자인 것처럼!

.ease-in-out-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}

이렇게 하면 우리의 bounce 애니메이션은 천천히 시작하고, 중간에서 빨라지고, 끝에서 천천히 느려집니다. 이는 더 자연스럽고弾력적인 느낌을 줍니다.

애니메이션 채우기 모드

animation-fill-mode 속성은 애니메이션 전후에 요소가 어떻게 보여야 하는지 결정합니다.

.fill-mode-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
}

forwards를 사용하면 요소가 애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지하게 됩니다. 원래 상태로 돌아가지 않습니다.

애니메이션 축약 속성

이 모든 속성에 당황하지 마세요! CSS는 모든 애니메이션 속성을 한 번에 설정할 수 있는 축약 속성을 제공합니다:

.shorthand-bounce {
animation: bounce 1s ease-in-out 2s infinite alternate forwards;
}

이 단일 줄은 애니메이션 이름, 지속 시간, 타이밍 기능, 지연 시간, 반복 횟수, 방향, 채우기 모드를 설정합니다. 마치 CSS 애니메이션의 스위스 아ーノ이Knife!

CSS 애니메이션 속성 목록

여기서 우리가 다룰 수 있는 모든 CSS 애니메이션 속성의 유용한 표입니다:

속성	설명
animation-name	@keyframes 애니메이션의 이름을 지정합니다
animation-duration	애니메이션이 하나의 주기를 완료하는 데 걸리는 시간을 지정합니다
animation-timing-function	애니메이션의 속도 곡선을 지정합니다
animation-delay	애니메이션 시작 전 지연 시간을 지정합니다
animation-iteration-count	애니메이션이 재생되는 횟수를 지정합니다
animation-direction	애니메이션이 반대 방향으로 재생되는지 여부를 지정합니다
animation-fill-mode	애니메이션이 실행되는 시간 외에 어떤 값을 적용해야 하는지 지정합니다
animation	모든 애니메이션 속성을 한 번에 설정하는 축약 속성입니다

그리고 여러분, 여러분은 이제 CSS 애니메이션으로 웹 페이지를 살리는 지식을 갖추셨습니다. 강력한 힘을 가지게 되었으니, 이를 사용하여 사용자 경험을 향상시키는 데 신중하게 사용하세요.

연습을 하면서 CSS 애니메이션은 요리와 같습니다 - 레시피를 정확하게 맞추는 데 시간이 걸립니다. 하지만 한 번 맞추면, 여러분은 사용자들이 두 번째를 기다리게 할 맛있는, 애니메이션된 웹 경험을 제공할 것입니다!

이제 디지털 피카소들, 웹이 여러분의 캔버스이고 CSS가 여러분의 붓입니다. 행복하게 애니메이션을 만들어 보세요!

Credits: Image by storyset