CSS Animation 속성이란?

CSS Animation 속성이란?

animation 과 관련된 여러 속성을 한번에 입력할 수 있는 축약 (shorthand) 속성이다.

예제

.animation {
  animation: 3s ease-in 1s infinite reverse both running slidein;
}

순서

속성의 의미는 각각 아래와 같은 순서를 갖으며, 중간에 하나씩 생략도 가능하다.

• animation-name: 애니메이션의 이름
  • 보통 @keyframes 의 이름이 들어간다.
• animation-duration: 애니메이션 한 싸이클의 지속시간
• animation-timing-function: 애니메이션 시간대별 효과
  • 가속, 선형 등의 옵션이 있다.
• animation-delay: 애니메이션이 얼마간의 딜레이를 갖고 실행될지
• animation-iteration-count: 애니메이션 반복 횟수
• animation-direction: 애니메이션 방향
  • 기본 값은 매 사이클마다 초기화된다.
• animation-fill-mode: CSS 스타일을 애니메이션 실행 이후에 입힐지 이전에 입힐지 결정
• animation-play-state: 애니메이션의 동작 상태를 제어할 수 있다.
  • 일시정지(paused)와 동작(running) 두가지 상태가 존재한다.

참고하면 좋은 레퍼런스

https://css-tricks.com/almanac/properties/a/animation/
https://developer.mozilla.org/en-US/docs/Web/CSS/animation