CSS / 애니메이션 / animation

예제

다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다.

코드는 다음과 같습니다.

코드의 의미

@keyframes

  • 어떤 모양에서 어떤 모양으로 바꿀지 정합니다.
  • 이름은 big으로 지었고, 20px 정사각형에서 200px 정사각형으로 커집니다.

animation-name

  • 어떤 @keyframes을 사용할지 정합니다.
  • 예제에서는 big을 사용합니다.

animation-duration

  • 애니메이션의 총 시간을 정합니다.
  • 예제에서는 2초 동안 애니메이션을 시작하고 끝냅니다.

animation-timing-function

  • 애니메이션 진행 속도를 정합니다.
  • 예제에서는 등속으로 진행합니다.

animation-delay

  • 애니메이션을 시작하기 전에 대기하는 시간을 정합니다.
  • 예제에서는 2초 대기 후 시작합니다.

animation-iteration-count

  • 애니메이션 반복 횟수를 정합니다.
  • 예제에서는 4회 반복합니다.

animation-direction

  • 애니메이션 진행 방향입니다.
  • 예제에서는 정방향 → 역방향 → 정방향 → 역방향 → …으로 진행하도록 정했습니다.

animation-fill-mode

  • 애니메이션을 마친 후 어떤 상태로 만들지 정합니다.

animation-play-state

  • 애니메이션을 진행할지 멈출지 정합니다.
  • 예제에서는 진행하는 것으로 설정했습니다.

축약형

애니메이션의 여러 속성은 animation 속성으로 줄여서 표현할 수 있습니다.

CSS 강좌