CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성

@keyframes

  • @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다.
  • IE는 버전 10 이상에서 사용할 수 있습니다.

문법

  • name : 애니메이션의 이름을 정합니다.
  • 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다.
  • n% : n%일 때의 모양을 정합니다.
  • 100% : 끝날 때의 모양을 정합니다. 100% 대신 to를 사용해도 됩니다.

예제 1

  • 박스가 일정 속도로 커지는 애니메이션입니다.

예제 2

  • 네 단계로 나누어 커졌다 작아졌다 하는 애니메이션입니다.

CSS 강좌