CSS ANIMATION 속성 정리

ANIMATION

애니메이션은 애니메이션을 나타내는 css스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다.

애니메이션은 트랜지션보다 더 규모가 크고 복잡하며 다양한 효과를 가지고 있기 때문에 좀 더 정밀한 구현이 가능합니다.

애니메이션의 장점

• 자바스크립트에 비해서 간단하게 구현할 수 있습니다.
• css 애니메이션은 최대한 부드럽게 렌더링 됩니다.
• 애니메이션의 성능을 효율적으로 최적화 할 수 있습니다.

애니메이션의 속성

• animation-name : 애니메이션의 중간상태를 지정하기 위한 이름을 정의 합니다. 중간상태는 @keyframes 규칙을 이용하여 기술합니다.
• animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. 설정값은 ()s로 표시할 수 있다.
• animation-delay : 엘리먼트가 로드되고 언제 애니메이션이 시작될지 지정합니다. 설정값은 ()s로 표시할 수 있다.
• animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
• animation-interation-count : 애니메이션이 몇 번 반복될지 지정합니다.
• animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.
• animation-timing-function : 중간상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

한줄로 작성할 수 있는 속기형도 있다.

ex ) animation : name | duration | timing-function | delay | interation-count | direction | fill-mode | play-state ;

 

animation-name

name은 @keyfrmaes속성에서 설정한 애니메이션의 이름이다. 이름을 설정해야 애니메이션을 재생할 수 있습니다.

name에 사용할 수 없는 이름들이 있는데 숫자로 시작되는 이름과 특수문자로 시작되는 이름은 사용 할 수 없다.

animation-duration

duration의 속성값의 단위는 초(s),밀리 초 (ms)단위를 사용 할 수 있다.

duration의 속성값에는 0이나 -2와 같은 음수의 값을 넣으면 애니메이션이 실행되지 않는다.

animation-delay

delay의 속성값은 0, now, 초와 밀리초단위 를 사용할 수 있다.

0과 now의 값은 똑같이 애니메이션이 바로 시작된다.

음수값의 속성값을 지정하면 애니메이션이 바로 시작되지만 음수값만큼의 시간이 지난 뒤의 순간부터 애니메이션이 시작된다.

ex ) 값이 -3s이면 3초가 지난 애니메이션의 순간부터 바로 시작된다.

animation-direction

@keyframes에서 from -> to로 진행되는게 순방향이고 to -> from으로 진행되는게 역방향이다.

애니메이션이 역방향으로 진행될때는 animation-timing-function속성과 관련된 효과도 반대로 적용된다.

direction에 들어갈 수 있는 속성값은 다음과 같다.

• normal : 순방향으로 재생한다. 기본값이다. 재생이 끝나면 다시 처음으로 돌아가서 시작한다.
• alternate : 순방향으로 시작해서 역방향과 순방향을 번갈아가면서 재생한다. 홀수값은 순방향, 짝수값은 역방향이다.
• reverse : 역방향으로 재생한다. 재생이 끝나면 다시 마지막으로 돌아가서 시작한다.
• alternate-reverse : 역방향으로 시작해서 순방향과 역방향을 번갈아가면서 재생한다. 홀수값은 역방향, 짝수값은 순방향이다.

animation-interation-count

속성값은 숫자와 infinite를 넣을 수 있다.

속성값에 들어가는 숫자가 소수면 해당 프레임까지만 진행된다. ex ) 1.3이면 1번 진행하고 전체의 10분의 3만큼 진행되고 멈춘다.

infinite는 무한히 계속된다.

animation-play-state

속성값은 running 과 paused 가 있다.

running은 애니메이션을 재생하고 paused는 애니메이션을 정지시킨다.

animation-timing-function

transition에 있는 타이밍의 속성값과 같다. -> 트랜지션정리

@keyframes

애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로

from 속성이나 0% 속성에 설정한 스타일에서 출발해 to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 애니메이션이 재생됩니다.

키프레임은 애니메이션을 적용할 요소의 animation-name을 정의하고 그 키프레임 코드블럭에 재생할 프레임별 시간비율을 작성합니다.

• 0% : 애니메이션의 시작 프레임이다.
• 100% : 애니메이션의 마지막 프레임이다.
• from : 0%와 의미가 같다.
• to : 100%와 의미가 같다.

0%와 100%의 사이에는 여러개의 중간값을 설정해 프레임을 작성할 수 있습니다.

Transition과 Animation의 차이

transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이다.

transition 속성은 요소의 상태가 변해야 애니메이션을 실행한다.

animation 속성은 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다. 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.

transition 속성과 animation 속성의 가장 큰 차이는 transition 속성은 요소의 상태가 바뀌어야 바뀌는 상태를 애니메이션으로 표현하지만, animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다.

또한 @keyframes 속성으로 프레임을 추가할 수 있다.