[CSS] animation과 keyframe

 

[css] transition

 

animation

animation 속성은 transition과 함께 웹페이지의 애니메이션을 동작할수 있게한다.

animation은 transition과 다르게 keyframe이라는 속성을 사용하여 조금 더 세분화된 동작의 사용이 가능하며 상태값의 전후를 억지로 변경하지 않아도 되며 동작의 반복등도 가능하다.

키프레임은 다음과 같은 하위 속성으로 구성된다.

@keyframes animationName {
 /* from, to 로 중간 프레임 정의 */
  from {
    /* 시작 상태 */
  }
  to {
    /* 끝 상태 */
  }
  /* 백분율로 중간 프레임 정의 */
  0% {
    /* 상태 */
  }
  50% {
    /* 상태 */
  }
  100% {
    /* 상태 */
  }
}

 

animation의 속성 값

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

 

1. name: keyframe 애니메이션의 이름

2. duration: 애니메이션 지속시간

3. timing-function: 애니메이션의 타이밍 조절 함수

4. delay: 애니메이션 시작 딜레이

5. iteration-count: 애니메이션 반복횟수, infinite로 무한반복 가능

6. direction: 애니메이션 진행방향

7. fill-mode: 애니메이션 실행 전과 후의 스타일 제어

8. play-state: 애니메이션을 일시 중지하거나 다시 실행

 

이중 애니메이션이 종료되면 마지막 스타일을 적용하고 끝내고 싶을때가 있다. 예를들어 opacity가 0에서 시작해서 1로 끝나는 애니메이션 등이다. 이럴때 fill-mode를 forward로 지정해두면 마지막 상태값을 유지하며 애니메이션이 종료된다.