CSS: Animation 에 대해서 알아봅시다!

Animation

 

Animation

animationL {name} {duration} {timing-funtion} {delay} {iteration} {direction} {fill-more} {play-state}

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

Transition

transition: {property} {duration} {timing-funtion} {deley}

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

Timing-function

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

animation-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;} 

animation-timing-function 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 steps

See the Pen animation steps by Jiwon Son (@jiwonson) on CodePen.

animation-timing-function 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);} 

animation-timing-function Start

delay1

delay2

delay3

delay4

delay5

    .box4 > div.timing17 {animation: move1 3s 10 cubic-bezier(1,-0.6,0,1.44) 0s;}         .box4 > div.timing18 {animation: move1 3s 10 cubic-bezier(1,-0.6,0,1.44) 0.1s;}         .box4 > div.timing19 {animation: move1 3s 10 cubic-bezier(1,-0.6,0,1.44) 0.2s;}         .box4 > div.timing20 {animation: move1 3s 10 cubic-bezier(1,-0.6,0,1.44) 0.3s;}         .box4 > div.timing21 {animation: move1 3s 10 cubic-bezier(1,-0.6,0,1.44) 0.4s;}  

animation-direction normal reverse alternate alternate-reverse

direction

    .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;} 

animation-fill-mode Start

none

forwards

backwards

both

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

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 div.running {animation: move2 3s 10 ease; animation-play-state: running;}     .box8 div.paused {animation: move2 3s 10 ease; animation-play-state: paused;} 

animate.css

bounce rubberBand tada wobble jello rotateInDown zoomInDown hinge lightSpeenIn rotate

animate

animate

animate

animate

animate

    .box9 > div {width: 140px; height: 140px; line-height: 140px; text-align: center; float: left; margin: 40px;}     .box9 > div.bounce {animation: bounce 1s 10 ease;}     .box9 > div.rubberBand {animation: rubberBand 1s 10 ease;}     .box9 > div.tada {animation: tada 1s 10 ease; border-radius: 0; line-height: 70px; height: 70px;}     .box9 > div.wobble {animation: wobble 1s 10 ease; border-radius: 0; line-height: 70px; height: 70px;}     .box9 > div.jello {animation: jello 1s 10 ease; }     .box9 > div.rotateInDown {animation: rotateInDown 1s 10 ease; background: url("http://wldnjs7204.dothome.co.kr/assets/ico/icon.png"); background-size: 100%; }     .box9 > div.zoomInDown {animation: zoomInDown 1.2s 10 ease; background: url("http://wldnjs7204.dothome.co.kr/assets/ico/icon.png"); background-size: 100%; }     .box9 > div.hinge {animation: hinge 2.2s 10 ease; background: url("http://wldnjs7204.dothome.co.kr/assets/ico/icon.png"); background-size: 100%; border-radius: 5px 80px;}     .box9 > div.lightSpeenIn {animation: lightSpeenIn 1s 10 ease; background: url("http://wldnjs7204.dothome.co.kr/assets/ico/icon.png"); background-size: 100%; border-radius: 5px;}     .box9 > div.rotate {animation: rotate 1s 10 ease; background: url("http://wldnjs7204.dothome.co.kr/assets/ico/icon.png"); background-size: 100%; border-radius: 5px;}