Animation

Animation

Animation

animation : {name} {duration} {timing-function} {delay} {itration-count} {direction} {fill-mode} {play-state}

Porperty	Description
animation-name	@keyframes에 지정된 이름을 설정합니다.
animation-duration	애니에이션이 실행되는 시간을 설정합니다.
animation-timing-function	애니에이션 키프레임을 설정합니다.
animation-iteration-function	애니에이션 반복 횟수를 설정합니다.
animation-direction	애니에이션 방향을 설정합니다.
animation-fill-mode	애니에이션 시작되기 전이나 끝나고 어떤 값이 적용될 지 설정합니다.
animation-play-state	애니에이션 실행 상태를 설정합니다.

Transition

transition : {property} {duration} {timing-function} {delay}

Porperty	Description
transition-property	트랜지션을 적용할 CSS 대상을 설정합니다.
transition-duration	트랜지션을 작동시간을 설정합니다.
transition-timing-function	트랜지션을 움직임 효과 설정합니다.
transition-delay	트랜지션 시작되기 전에 대기시간을 설정합니다.

Timing-function

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

ainmation-timing-function Start

linear

ease

ease-in

ease-out

ease-in-out

.box1>div.timing1 {animation: move1 2s 10 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;  }

ainmation-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);  }

ainmation-timing-function : cubic Start

cubic1

cubic2

cubic3

cubic4

cubic5

.box3>div.timing12 {animation: move1 3s 10 cubic-bezier(0,0,0,0);}
.box3>div.timing13 {animation: move1 3s 10 cubic-bezier(1,0,0,1);}
.box3>div.timing14 {animation: move1 3s 10 cubic-bezier(1,-0.6,0,1.44);}
.box3>div.timing15 {animation: move1 3s 10 cubic-bezier(1,-0.6,1,0.15);}
.box3>div.timing16 {animation: move1 3s 10 cubic-bezier(0.49, 1.49, 0.46,-0.13)}

ainmation-delay Start

delay1

delay2

delay3

delay4

delay5

.box4>div.timing17 {animation: move1 3s 10 0s}
.box4>div.timing18 {animation: move1 3s 10 0.5s}
.box4>div.timing19 {animation: move1 3s 10 1s}
.box4>div.timing20 {animation: move1 3s 10 1.5s}
.box4>div.timing21 {animation: move1 3s 10 2s}

ainmation-direction normal reverse alternate alternate-reverse

direction

.box div.normal {animation: move2 3s 100 ease; animation-direction: normal;  }
.box div.reverse {animation: move2 3s 100 ease; animation-direction: reverse;  }
.box div.alternate {animation: move2 3s 100 ease; animation-direction: alternate; }
.box div.alternate-reverse {animation: move2 3s 100 ease; animation-direction: alternate-reverse;  }

ainmation-fill-mode Start

none

forwards

backwards

both

.box div.timing22 {animation: move3 3s 1 ease; animation-fill-mode: none;}
.box div.timing23 {animation: move3 3s 1 ease; animation-fill-mode: forwards;}
.box div.timing24 {animation: move3 3s 1 ease; animation-fill-mode: backwards;}
.box div.timing25 {animation: move3 3s 1 ease; animation-fill-mode: both;}

ainmation-iteration-count Start

count1

count2

count3

infinite

.box div.timing26 {animation: move1 1s ease; animation-iteration-count: 1;}
.box div.timing27 {animation: move1 1s ease; animation-iteration-count: 2;}
.box div.timing28 {animation: move1 1s ease; animation-iteration-count: 3;}
.box div.timing29 {animation: move1 1s ease; animation-iteration-count: infinite;}

ainmation-play-state running paused

state

.box div.running {animation: move2 3s 100 ease; animation-play-state: running;}
.box div.paused {animation: move2 3s 100 ease; animation-play-state: paused;}

Animate.css

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

jello

bounce