애니메이션

애니메이션 (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; /* 클릭 시 재생 */
}

참고

• 애니메이션 사용하기

• 애니메이션 문법

• easings.net

• Ceaser - CSS EASING ANIMATION TOOL

• CSS Animation (실습 시작) by codepen

• CSS Animation (실습 완료) by codepen