[CSS] animation

animation

animation이란?

여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법

CSS을 이용해서 애니메이션을 만드는 두 가지 방법

1. transition 속성 활용
2. animation 속성과 keyframe 활용

transition  VS  animation

• transition : 특정한 이벤트를 기점으로 작동함 (hover 등)
• animation : 시작하기 위한 이벤트가 필요 없음. 시작, 정지, 반복까지 제어할 수 있음
  animation 속성은 @keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어해주어야 한다.

1. animation-name
   어떠한 keyframes를 요소에 적용할 것인지 지정
   
   
2. animation-duration
   애니메이션을 한 번 재생하는데 걸리는 시간을 설정
   
   
3. animation-direction
   애니메이션 재생 방향을 정의(정방향/역방향)
   normal(기본값, 정방향), reverse(역방향), alternate(정방향, 반복시 정뱡향/역방향을 번갈아 재생), alternate-reverse(역방향, 반복시 정방향/역방향을 번갈아 재생)
   
   
4. animation-iteration-count
   애니메이션 재생 횟수를 정의
   
   
5. animation-timing-function
   애니메이션 재생 패턴을 정의
   
   
6. animation-delay
   애니메이션 시작을 얼마나 지연할지 설정
   
   
7. animation 단축속성
   animation : moveRight(name) 0.4s(duration) linear(timing-function) 1s(delay) infinite(iteration-count) alternate(direction)
   ★순서가 바뀔 경우 오류가 나기 때문에 순서 유의 필요
   
   

@keyframes란?

CSS 애니메이션의 시작, 중간, 끝 등의 중간상태를 정의한다.

from & to 대신 진행도(%) 표기도 가능하다.

@keyframes 작성법