상세정보 : http://www.w3.org/TR/css3-animations/
키프레임 선언
@-webkit-keyframes myAnimation {
0% { left: 100px; }
40% { left: 150px; }
60% { left: 75px; }
100% { left: 100px; }
}
or
@-webkit-keyframes myAnimation {
from { opacity: 0.1; width: 150px; }
to { opacity: 1.0; width: 300px; }
}
애니메이션 속성
-webkit-animation-name
키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다
-webkit-animation-duration
애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다
(기본 값: 0)
-webkit-animation-iteration-count
애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다
두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다
만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1)
-webkit-animation-direction
키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal)
*앞뒤로 반복하는 애니메이션 작성시 alternate 값 지정시 자동으로 reverse 효과처럼 나온다.
-webkit-animation-timing-function
키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하며 다음 글을 참고 바란다
(기본 값: ease) [CSS3] Transition
-webkit-animation-play-state
애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running)
애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다
-webkit-animation-delay
애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작)
-webkit-animation-fill-mode
애니메이션이 처음 시작될때의 값? 초기에 대기시간(delay)등으로 인해 있을경우 보여지는 부분을 애니메이션의 0%로 채울지 100%에서 채울지를 정한다.?
forwards -
backwards - 0%의 값으로 채워논다
both의 값을 가지고 있으며 (기본 값: none)
축약형 표시방법
[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] ]*
example>
축약형 "," 로 다중 애니메이션 가능 순서대로, name duration delay timing-function repeat
-webkit-animation:fade 1.2s 1,logo .5s 1.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 1
** 애니메이션 제어시 addClass나 removeClass등으로 처리하는 게 쉽다.
.ani_start{-webkit-animation-play-state:running}
.ani_stop{-webkit-animation-play-state:paused}