애니메이션

애니메이션 (Animation)

애니메이션 속성은 IE10 이상 지원한다.

  • animation-name 애니메이션 이름 (@keyframes 이름)

  • animation-duration 애니메이션 시간(초단위)

  • animation-timing-function 애니메이션 타이밍 함수

  • animation-delay 애니메이션 지연시간

    • 400ms(= 0.4s), 2s, -2s

    • 음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작된다.

  • animation-direction 애니메이션 종료 후, 진행 (순/역)방향

    • <normal> : from - to (기본값)

    • <reverse> : to - from

    • <alternate> : 홀(nomal) 짝(reverse)

    • <alternate-reverse> : 홀(reverse) 짝(nomal)

  • animation-iteration-count 애니메이션 반복 횟수

    • 1(기본값), <number>(2,4,1.5...), <infinite>무한반복

  • animation-play-state 애니메이션 재생/일시정지 설정

    • <running>(기본값) <paused>

  • animation-fill-mode 애니메이션 시작 전/종료 후 키프레임 설정 애니메이션이 실행 상태가 아닐 때 (대기 or 종료) 요소의 스타일 지정

    • <none>:

      • 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.

      • 종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.

    • <forwards>:

      • 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.

      • 종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

    • <backwrads>:

      • 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.

      • 종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.

    • <both> :

      • 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.

      • 종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

  • animation 애니메이션 속기형

    • 순서 : <name> <timing-funtion> <iterration-count> <direction> <fill-mode> <delay>

예시

.sonic {
  animation-name: sonic-running;
}

/* 애니메이션 정의 */
@keyframes sonic-running {
  /* @keyframes 이름 */
  from {
  } /* 시작하는 지점의 상태, 생략 가능 */
  to {
  } /* 끝나는 지점의 상태 */
}

/* 또는 */
@keyframes sonic-running {
  0% {
  } /* from {} */
  50% {
  }
  75% {
  }
  100% {
  } /* to {} */
}
.sonic {
  animation-play-state: paused;
}

/* 응용 */
.sonic-sonic-adventure:active .sonic {
  animation-play-state: paused; /* 클릭 시 멈춤 */
  animation-play-state: running; /* 클릭 시 재생 */
}

참고

Previous트랜지션NextCSS steps()

Last updated

Was this helpful?