[CSS] animation 에 대하여

animation = css style + @keyframes (애니메이션의 중간상태를 나타내는 것.)

keyframes를 통해서 부드러운 렌더링 효과 구현이 가능하다.

 

animation은 단축형과 속기형으로 사용할 수 있다.

 

* 단축형

1) animation-name : animation의 중간상태를 지정하기 위한 이름 정의

keyframes의 이름 = animation의 이름

 

2) animation-duration : animation을 한 번 재생하는데 걸리는 시간을 설정.

 

3) animation-delay : animation 시작을 지연할 시간을 설정.

 

4) animation-direction : animation의 방향을 결정.

속성 예시) normal / alternate / reverse / alternate-reverse

 

5) animation-iteration-count : animation의 재생횟수를 설정.

숫자, infinite 로 지정가능.

 

6) animation-play-state : animation 재생 여부를 정의.

속성) running (default) / paused - ex. click or hover 시 적용되도록 쓰임.

 

7) animation-timinig-function : animation의 keyframes 사이의 재생속도를 조절하는 속성.

속성 예시) ease (default) / ease-in-out

 

transition vs animation 차이

 

- 공통 : IE9 이하 미지원.

- transition의 속성 : 요소의 상태가 변해야 animation을 실행. (hover or click 등의 이벤트 트리거에 의해 동작함.)

- animation의 속성 : 요소의 상태변화와 상관없이 animation을 실행, 요소의 모양과 동작을 keyframes 단위로 변경할 수 있음.