Animation


Animation

animation : {name} {duration} {timing-function} {delay} {iteration-count} {direction} {fill-mode} {play-state}
Property Description
animation-name @keyframes에 지정된 이름을 설정합니다.
animation-duration 애니메이션이 실행되는 시간을 설정합니다.
animation-timing-function 애니메이션의 키프레임 움직임을 설정합니다.
animation-delay 애니메이션이 로드 된 후 애니메이션이 시작 될 때 까지의 시간을 설정합니다.
animation-iteration-count 애니메이션의 반복 횟수를 설정합니다.
animation-direction 애니메이션의 움직임 방향을 설정합니다.
animation-fill-mode 애니메이션이 끝난 후의 상태를 설정합니다.
animation-play-state 애니메이션의 진행 상태를 설정합니다.

timing-function

Property Description
linear 일정한 간격으로 움직입니다.
ease 처음에서 서서히 가속하고 마지막 부분에서 급격히 감속합니다.
ease-in 처음에서 천천히 시작하고 마지막에 가속합니다.
ease-out 처음에는 최대 속도로 시작하고 마지막에 감속합니다.
ease-in-out 처음에는 제로(0) 속도에서 시작하고 중간시점에서 최고 속도로 움직이고, 마지막 부분에서 서서히 감속합니다.
step-start 애니메이션이 시작점에서만 표현됩니다.
step-end 애니메이션이 끝점에서만 표현됩니다.
steps(ints, start/end) 애니메이션 단계별로 표현합니다.
cubic-bezier(n,n,n,n) 베이지 곡선 값을 만들어서 속도를 설정합니다.

Transition

transition : {property} {duration} {timimg-function} {delay}
Property Description
transition-property 트랜지션을 적용할 CSS 속성 대상을 설정합니다.
transition-duration 트랜지션 작동시간을 설정합니다.
transition-timimg-function 트랜지션 움직임 효과를 설정합니다.
transition-delay 트랜지션이 시작되기 전에 대기시간을 설정합니다.

Animation-timing-function Start

linear
ease
ease-in
ease-out
ease-in-out
.box1 > div.timing1 { /* 속기형 : animation: move1 2s 10 linear; */
animation-name: move1;
animation-duration: 2s;
animation-iteration-count: 10;
animation-timing-function: linear;
}
.box1 > div.timing2 { animation: move1 2s 10 ease;}
.box1 > div.timing3 { animation: move1 2s 10 ease-in;}
.box1 > div.timing4 { animation: move1 2s 10 ease-out;}
.box1 > div.timing5 { animation: move1 2s 10 ease-in-out;}

Animation-timing-function : step Start

step-start
step-end
steps(4, start)
steps(4, end)
steps(10, start)
steps(10, end)
.box2 > div.timing6 { animation: move1 3s 10 step-start; }
.box2 > div.timing7 { animation: move1 3s 10 step-end; }
.box2 > div.timing8 { animation: move1 3s 10 steps(4, start); }
.box2 > div.timing9 { animation: move1 3s 10 steps(4, end); }
.box2 > div.timing10 { animation: move1 3s 10 steps(10, start); }
.box2 > div.timing11 { animation: move1 3s 10 steps(10, end); }

Animation-timing-function : cubic-bezier Start

cubic1
cubic2
cubic3
cubic4
cubic5
.box3 > div.timing12 { animation: move1 3s 10 cubic-bezier(0.21, 1.93, 0.86, 1.29); }
.box3 > div.timing13 { animation: move1 3s 10 cubic-bezier(0, 0.82, 1, 0.01); }
.box3 > div.timing14 { animation: move1 3s 10 cubic-bezier(1, 0.03, 0, 0.99); }
.box3 > div.timing15 { animation: move1 3s 10 cubic-bezier(0.21, 1.93, 0.1, 0.01); }
.box3 > div.timing16 { animation: move1 3s 10 cubic-bezier(1, 0.48, 0.07, 0.61); }

animation-delay Start

delay1
delay2
delay3
delay4
delay5
.box4 > div.timing17 { animation: move1 3s 0.1s 10 cubic-bezier(1, 0.48, 0.07, 0.61); }
.box4 > div.timing18 { animation: move1 3s 0.2s 10 cubic-bezier(1, 0.48, 0.07, 0.61); }
.box4 > div.timing19 { animation: move1 3s 0.3s 10 cubic-bezier(1, 0.48, 0.07, 0.61); }
.box4 > div.timing20 { animation: move1 3s 0.4s 10 cubic-bezier(1, 0.48, 0.07, 0.61); }
.box4 > div.timing21 { animation: move1 3s 0.5s 10 cubic-bezier(1, 0.48, 0.07, 0.61); }

animation-direction normal reverse alternate alternate-reverse

direction
.box5 { height: 500px; }
.box5 > div.normal { animation: move2 3s 10 ease normal; }
.box5 > div.reverse { animation: move2 3s 10 ease reverse; }
.box5 > div.alternate { animation: move2 3s 10 ease alternate; }
.box5 > div.alternate-reverse { animation: move2 3s 10 ease alternate-reverse; }
@keyframes move2 {
0% { left: 0; top: 0; }
25% { left: calc(100% - 70px); top: 0; }
50% { left: calc(100% - 70px); top: calc(100% - 70px); }
75% { left: 0; top: calc(100% - 70px); }
100% { left: 0; top: 0; }
}

animation-fill-mode Start

none
forwards
backwards
both
.box6 > div.timing22 { animation: move3 3s 1 ease none; }
.box6 > div.timing23 { animation: move3 3s 1 ease forwards; }
.box6 > div.timing24 { animation: move3 3s 1 ease backwards; }
.box6 > div.timing25 { animation: move3 3s 1 ease both; }
@keyframes move3 {
0% { left: 0%; }
100% {left: calc(100% - 70px); }
}

animation-iteration-count Start

count1
count2
count3
infinite
.box7 > div.timing26 { animation: move1 1s ease 1; }
.box7 > div.timing27 { animation: move1 1s ease 2; }
.box7 > div.timing28 { animation: move1 1s ease 3; }
.box7 > div.timing29 { animation: move1 1s ease infinite; }

animation-play-state running paused

state
.box8 { height: 300px; }
.box8 > div.running { animation: move2 3s 10 ease running; }
.box8 > div.paused { animation: move2 3s 10 ease paused; }

Animate.css bounce bubberBand tada flipOutX lightSpeedIn zoomInUp rotateOut bounceInRight heartBeat eyeflash

animate
animate
animate
animate
animate

running-paused animation sample (codepen)

See the Pen animation Steps by hyunji (@hyunjizzang) on CodePen.