animation이란?
animation이란 html내 요소에 적용되는 style을 다른 style로 전환시켜 준텍스트다.
ex)화면 오른쪽에서 왼쪽으로 이동하는 box
animation의 장점
- JS를 사용하지 못하더라도 간단하게 애니메이션을 만들 수 있음.
- JS를 이용하여 만든 결과물보다 우월한 성능을 보임. CSS 애니메이션은 frame-skipping 같은 여러 기술을 사용하여 부드러운 렌더링을 선보임.
- 브라우저는 애니메이션의 성능을 효율적으로 최적화함. 예를들어 화면에 보이지 않는 엘리먼트는 업데이트하지 않음.
animation 사용법
animation 은 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes 으로 구성되어 있다.
animation-name
name 은 @keyframes 속성에서 설정한 애니메이션의 이름이다.
이름을 설정해야 애니메이션을 재생할 수 있습니다.
즉, 이름을 정의해야 애니메이션을 재생(호출)할 수 있습니다.
animation-duration
animation-duration 은 애니메이션을 한 번 재생하는 데 걸리는 시간을 설정할 수 있으며, transition-duration 과 유사합니다.
animation-delay
animation-delay 속성은 애니메이션 시작을 지연할 시간을 설정하는 것으로 다음과 같은 값을 사용할 수 있습니다.
0 : 속성을 적용하자마자 애니메이션을 시작한다(기본값).
now :속성을 적용하자마자 애니메이션을 시작한다. 0으로 설정한 것과 같다. iOS2.0부터 사용할 수 있다.
숫자와 단위 : 설정한 시간이 지난 뒤에 애니메이션을 시작한다.
사용할 수 있는 단위는 초(s)와 밀리초 (ms)다. 값이 양수면 속성을 적용한 순간부터 시간을 계산해 애니메이션 재생을 지연한다.
값이 음수면 속성을 적용한 순간 바로 애니메이션을 실행하지만, 지정한 시간이 지난 뒤의 장면부터 애니메이션을 재생한다.
예를 들어, 값이 ‘-1s’면 1초가 지난 뒤의 장면부터 애니메이션을 재생한다.
animation-direction
animation-direction 은 애니메이션 재생 방향을 정의하는 속성입니다.
@keyframes 속성의 from 에 설정한 스타일에서 to에 설정한 스타일로 재생하는 것이 순방향이고, to에 설정한 타일에서 from 에 설정한 스타일로 재생하는 것이 역방향입니다.
normal : 애니메이션을 순방향으로 재생한다(기본값). 재생이 한 번 끝나면 첫 번째 프레임부터 다시 시작한다.
alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 순방향으로 재생하고, 짝수 번째로 재생할 때는 역방향으로 재생한다.
reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다.
alternate-reverse : 역방향으로 애니메이션을 시작해 순방향과 역방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 역방향으로 재생하고, 짝수번째로 재생할 때는 순방향으로 재생한다.
animation-iteration-count
animation-iteration-count 는 애니메이션을 재생하는 횟수를 정의하는 속성입니다.
숫자 : 기본값은 1이며, 설정한 횟수만큼 애니메이션을 재생합니다. 그리고 숫자가 소수면 애니메이션을 재생하는 도중에 첫 번째 프레임으로 돌아가 멈추고, 숫자가 음수면 애니메이션을 재생하지 않습니다.
infinite : 애니메이션을 무한으로 반복합니다.
animation-play-state
animation-play-state 는 애니메이션 재생 여부를 정의하는 속성입니다.
running : 애니메이션을 재생한다(기본값).
paused : 애니메이션을 정지한다.
animation-timing-function
애니메이션의 키프레임 사이의 재생 속도를 조절하는 속성으로 재생하는 동안 단계별 재생 속도를 설정합니다.
예를 들어 animation-timing-function:ease-in-out; 속성은 시작 부분의 재생 속도를 점점 빠르게 하고, 마지막 부분의 재생 속도를 점점 느리게 한다.
