#9 CSS 애니메이션(Animation), 키프레임(keyframes)
CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다.
그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다.
애니메이션 장점
CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다.
- 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
- 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
- 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.
Animation
animation 속성도 transition 과 유사하게 단일속성과 속기형으로 작성할 수 있습니다.
animation 은 위에서 언급했듯이 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes 으로 구성되어 있습니다.
먼저 animation 의 단일 속성에 대해 간단히 살펴봅니다.
- animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의합니다. 중간 상태는
@keyframes규칙을 이용하여 기술합니다. - animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
- animation-delay :엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
- animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
- animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다.
infinite로 지정하여 무한히 반복할 수 있습니다. - animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.
- animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
- animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.
Syntax(문법)
/* 단일 속성 */
.object {
animation-name: 1s;
animation-duration: 2s;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: 3;
animation-play-state: paused;
animation-timing-function: 1s;
animation-fill-mode: both;
}
/* 속기형 */
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];animation-name
name 은 @keyframes 속성에서 설정한 애니메이션의 이름이다. 이름을 설정해야 애니메이션을 재생할 수 있습니다.
즉, 이름을 정의해야 애니메이션을 재생(호출)할 수 있습니다.
유효한 애니메이션 이름과 유효하지 않은 애니메이션 이름
유효한 이름
animation-name: name; /* 문자열로 시작하는 이름 */
animation-name: _name; /* 언더바(_)로 시작하는 이름 */
animation-name: -name; /* 하이픈(-)으로 시작하는 이름 */유효하지 않은 이름
animation-name: 1name; /* 숫자로 시작하는 이름 */
animation-name: @name; /* 특수 문자로 시작하는 이름 */애니메이션 이름을 none 으로 작성하면 애니메이션을 재생하지 않는다.
설령 none 이라는 이름의 @keyframes 속성이 있어도 애니메이션을 재생하지 않는다.
다음의 코드를 살펴보도록 합니다.
See the Pen -webkit-animation-name 예제 by jaeheekim (@jaehee) on CodePen.
animation-duration
animation-duration 은 애니메이션을 한 번 재생하는 데 걸리는 시간을 설정할 수 있으며, transition-duration 과 유사합니다.
animation-duration 예제
See the Pen -webkit-animation-duration 속성을 적용한 예제 by jaeheekim (@jaehee) on CodePen.
animation-duration 속성값을 0으로 설정했기 때문에 사각형을 클릭해도 애니메이션이 재생되지 않습니다.
그리고 값이 음수(-2s)로 설정해도 애니메이션은 재생되지 않습니다.
animation-duration 속성의 값을 2s 로 설정하면 사각형이 2초 동안 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션이 재생된다.
animation-delay
animation-delay 속성은 애니메이션 시작을 지연할 시간을 설정하는 것으로 다음과 같은 값을 사용할 수 있습니다.
- 0 : 속성을 적용하자마자 애니메이션을 시작한다(기본값).
- now :속성을 적용하자마자 애니메이션을 시작한다. 0으로 설정한 것과 같다. iOS2.0부터 사용할 수 있다.
- 숫자와 단위 : 설정한 시간이 지난 뒤에 애니메이션을 시작한다.
사용할 수 있는 단위는 초(s)와 밀리초 (ms)다. 값이 양수면 속성을 적용한 순간부터 시간을 계산해 애니메이션 재생을 지연한다.
값이 음수면 속성을 적용한 순간 바로 애니메이션을 실행하지만, 지정한 시간이 지난 뒤의 장면부터 애니메이션을 재생한다.
예를 들어, 값이 ‘-1s’면 1초가 지난 뒤의 장면부터 애니메이션을 재생한다.
animation-delay 예제
See the Pen -webkit-animation-delay by jaeheekim (@jaehee) on CodePen.
속성값을 0으로 설정하면 코드를 바로 실행하여 사각형이 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션이 바로 재생되고, now 역시 바로 애니메이션이 재생됩니다.
속성값을 2s로 설정한 예제는 사각형을 클릭하면 2초 후 애니메이션이 재생됩니다.
animation-delay 속성값을 음수인 -1s로 설정한 예제는 사각형을 클릭하면 사각형이 화면 가운데에서부터 오른쪽으로 이동하는 애니메이션이 재생됩니다. 이는 값을 음수로 설정했기 때문에 1초가 지난 후인, 화면 가운데 위치의 장면부터 애니메이션이 재생되는 것입니다.
animation-direction
animation-direction 은 애니메이션 재생 방향을 정의하는 속성입니다.
@keyframes 속성의 from 에 설정한 스타일에서 to에 설정한 스타일로 재생하는 것이 순방향이고, to에 설정한 스타일에서 from 에 설정한 스타일로 재생하는 것이 역방향입니다.
animation-direction 에는 다음과 같은 값이 있습니다.
- normal : 애니메이션을 순방향으로 재생한다(기본값). 재생이 한 번 끝나면 첫 번째 프레임부터 다시 시작한다.
- alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 순방향으로 재생하고, 짝수 번째로 재생할 때는 역방향으로 재생한다.
- reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다.
- alternate-reverse : 역방향으로 애니메이션을 시작해 순방향과 역방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 역방향으로 재생하고, 짝수 번째로 재생할 때는 순방향으로 재생한다.
animation-direction 예제
See the Pen -webkit-animation-direction by jaeheekim (@jaehee) on CodePen.
첫 번째 박스를 실행(사각형을 클릭)하면 사각형이 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션이 세 번 재생됩니다.
animation-direction 속성값을 normal 로 설정했기 때문에 한 번 재생이 끝나 면 사각형이 다시 화면 왼쪽에서 오른쪽으로 이동하게 됩니다.
alternate 속성값은 순방향으로 애니메이션 재생을 시작해 역방향과 순방향으로 번갈아 가며 방향을 바꿔 가며 애니메이션을 재생하게 됩니다.
그래서 두 번째 사각형을 클릭하면 처음에는 사각형이 순방향인 화면 왼쪽에서 오른쪽으로 이동하다가 애니메이션이 두 번째로 재생될 때는 사각형이 역방향인 오른쪽에서 왼쪽으로 이동하게 됩니다. 세 번째로 재생될 때는 다시 순방향인 왼쪽에서 오른쪽으로 이동합니다.
세 번째 박스는 animation-direction 속성값을 reverse 로 설정했기 때문에 한 번 재생이 끝나면 사각형이 다시 화면 오른쪽에서 왼쪽으로
이동한다. 예제를 실행하고 사각형을 클릭하면 사각형이 화면 오른쪽에서 왼쪽으로 이동하는 애니메이션이 세 번 재생하게 됩니다.
네 번째 박스의 alternate-reverse 속성값은 역방향으로 애니메이션 재생을 시작해 순방향과 역방향으로 방향을 바꿔 가며 애니메이션을 재생합니다.
즉, 처음에는 박스가 역방향인 화면 오른쪽에서 왼쪽으로 이동한다. 애니메이션이 두 번째로 재생될 때는 사각형이 순방향인 왼쪽에서 오른쪽으로 이동하고 세 번째로 재생될 때는 다시 역방향인 오른쪽에서 왼쪽으로 이동하게 됩니다.
애니메이션이 역방향으로 재생될 때는 animation-timing-function 속성과 관련된 효과도 반대로 적용된다.
예를 들어 서서히 시작했다 빠르게 종료하는 animation-timing-function:ease-in; 을 적용한 애니메이션을 역방향으로 재생하면 빠르게 시작했다 서서히 종료하게 된다.
animation-iteration-count
animation-iteration-count 는 애니메이션을 재생하는 횟수를 정의하는 속성입니다.
animation-iteration-count 값은 다음과 같습니다.
- 숫자 : 기본값은 1이며, 설정한 횟수만큼 애니메이션을 재생합니다.
그리고 숫자가 소수면 애니메이션을 재생하는 도중에 첫 번째 프레임으로 돌아가 멈추고, 숫자가 음수면 애니메이션을 재생하지 않습니다. - infinite : 애니메이션을 무한으로 반복합니다.
animation-iteration-count 예제
See the Pen -webkit-animation-iteration-count 예제 by jaeheekim (@jaehee) on CodePen.
첫 번째 박스는 animation-iteration-count 속성값을 2로 설정했기 때문에 애니메이션은 두 번만 재생됩니다.
두 번째 박스는 속성값을 소수인 1.3으로 설정하면 애니메이션이 한 번 재생된 다음 전체 프레임의 3/10에 해당하는 프레임까지 더 재생되고 애니메이션이 끝나게 됩니다.
infinite 로 설정하면 애니메이션이 무한으로 동작하게 됩니다.
animation-play-state
animation-play-state 는 애니메이션 재생 여부를 정의하는 속성입니다.
animation-play-state 에 대한 속성값은 다음과 같습니다.
- running : 애니메이션을 재생한다(기본값).
- paused : 애니메이션을 정지한다.
animation-play-state 예제
멈춤 버튼과 재생 버튼에는 각각 animation-play-state 속성을 자바스크립트로 적용한 상태입니다.
See the Pen -webkit-animation-play-state 예제 by jaeheekim (@jaehee) on CodePen.
멈춤 버튼을 클릭하면 animation-play-state:paused 를 적용해 애니메이션 재생을 정지하고, 재생 버튼을 클릭하면 animation-play-state:running; 을 적용해 애니메이션을 재생하게 됩니다.
animation-timing-function
애니메이션의 키프레임 사이의 재생 속도를 조절하는 속성으로 재생하는 동안 단계별 재생 속도를 설정합니다.
예를 들어 animation-timing-function:ease-in-out; 속성은 시작 부분의 재생 속도를 점점 빠르게 하고, 마지막 부분의 재생 속도를 점점 느리게 한다.
transition-timing-function 과 유사합니다.
ease VS ease-in-out
See the Pen ease 와 ease-in-out 의 비교 by jaeheekim (@jaehee) on CodePen.
@keyframes 과 animation 속기형
애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로 from 속성이나 0% 속성에 설정한 스타일에서 출발해 to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 애니메이션이 재생됩니다.
Syntax(문법)
@keyframes animationName {
from {
css-styles;
}
to {
css-styles;
}
}키프레임은 애니메이션을 적용할 요소의 animation-name 을 정의하고 그 키프레임 코드 블럭에 재생할 프레임별 시간 비율을 작성합니다.
- 0% : 애니메이션의 시작 프레임이다.
- 100% : 애니메이션의 마지막 프레임이다.
- from : 애니메이션의 시작 프레임이다. 0% 와 같다.
- to : 애니메이션의 마지막 프레임이다. 100% 와 같다.
0%와 100% 사이에는 여러 개의 중간 값(%)을 설정해 프레임을 작성할 수 있습니다.
@keyframes move {
0% {
top: 0px;
}
25%{
top: 20px;
}
75%{
top: 175px;
}
100%{
top: 200px;
}
}@keyframes 예제
See the Pen animation ball effect by jaeheekim (@jaehee) on CodePen.
transition VS animation 차이
transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이다.
transition 속성은 요소의 상태가 변해야 애니메이션을 실행한다.
animation 속성은 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다. 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.
transition 속성과 animation 속성의 가장 큰 차이는 transition 속성은 요소의 상태가 바뀌어야 바뀌는 상태를 애니메이션으로 표현하지만, animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다. 또한 @keyframes 속성으로 프레임을 추가할 수 있다.
두 속성의 차이에 관한 더 자세한 설명은 “Transitions & Animations” 문서를 참고.