CSS Animation 속성이란?

프론트엔드/CSS

Jake Seo 2022. 11. 13. 14:39

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) 두가지 상태가 존재한다.

참고하면 좋은 레퍼런스