css animation 속성에 대해 알아보자 !

@keyframes

keyframes 2개 이상의 애니메이션의 중간 상태를 지정

@keyframes 이름 {
  0% {
   속성: 값;
  }
  100% {
   속성: 값;
  }
}

위처럼 @keyframes 이름을 선언하고 아래쪽에 단계별 변환될 속성: 값을 입력하여 사용한다.

 

animation

요소의 애니메이션을 설정해주고 제어하는 단축 속성이다!

@keyframes 으로 애니메이션의 이름을 설정해야 사용할 수 있다.

ex) animation: 애니메이션이름 지속시간 타이밍함수 대기시간 반복횟수 반복방향 전후상태 등등.. 불필요한 것은 뺄 수 있다.

• animation-name @keyframes 로 설정한 애니메이션의 이름을 지정
• animation-duration 애니메이션의 지속시간을 설정
• animation-timing-function 애니메이션의 타이밍함수(ease, linear, ease-in, ease-out, ease-in-out 등..)를 설정
• animation-delay 애니메이션의 대기시간을 설정
• animation-interation-count 애니메이션의 반복 횟수를 설정, 값으로 infinite를 주면 무한 반복한다.
• animation-direction 애니메이션의 반복 방향을 설정
  값은 정방향만 반복하는 normal 역방향만 반복하는 reverse,
  정방향에서 역방향으로 왕복하는 alternate, 역방향에서 정방향으로 왕복하는 alternate-reverse가 있다.
  alternate 는 왕복이기 때문에 반복 횟수가 2회 이상이어야 제대로 동작한다.
• animation-fill-mode 애니메이션의 전후 상태를 설정
  none 기존 위치 시작 -> 애니메이션 시작 위치 이동 -> 동작 -> 기존위치에서 끝
  forwards 기존위치 시작 -> 애니메이션 시작위치 이동 -> 동작 -> 애니메이션 끝 위치에서 끝
  backwards 애니메이션 시작 위치에서 시작 -> 동작 -> 기존위치에서 끝
  both 애니메이션 시작위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝