Animation


Animation

animation : {name} {duration} {timing-fuction} {delay} {iteraction} {direction} {fill-mode} {play-state}
Property Description
animation-name @keyframes에 지정된 이름을 설정합니다.
animation-duration 애니메이션이 실행되는 시간을 설정합니다.
animation-timing-fuction 애니메이션이 키프레임 움직임을 설정합니다.
animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 설정합니다.
animation-iteraction 애니메이션 반복 횟수를 설정합니다.
animation-direction 애니메이션 방향을 설정합니다.
animation-fill-mode 애니메이션이 시작되기 전이나 끝나고 어떤 값을 적용할 지 설정합니다.
animation-play-state 애니메이션 실행상태를 설정합니다.

Transition

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

Timing-function

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

animation-timing-function Start

linear
ease
ease-in
ease-out
ease-in-out
          
.box>div {width: 60px; height: 60px; background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%); line-height: 60px; text-align: center; border-radius: 50%; color: #999; margin: 10px; position: relative; font-size: 12px; overflow: hidden; }
.btn  {background: #b8cbb8; color: #fff; }
.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 : 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-start;}    
.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 JwMYgB by jeongahlee (@jeongahlee) on CodePen.

See the Pen animation steps by jeongahlee (@jeongahlee) on CodePen.


animation-timing-function : Cubic-bezier 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(0, 0.97, 0.76, 0.13);}    
.box3 > div.timing15 {animation: move1 3s 10 cubic-bezier(0, 1.42, 0.75, -0.27);}    
.box3 > div.timing16 {animation: move1 3s 10 cubic-bezier(0.81, 0.6, 0, 0.73);}

animation-timing-function : delay Start

delay1
delay2
delay3
delay4
delay5
.box4 > div.timing17 {animation: move1 3s 10 cubic-bezier(0, 1.42, 0.75, -0.27) 0s;}    
.box4 > div.timing18 {animation: move1 3s 10 cubic-bezier(0, 1.42, 0.75, -0.27) 0.1s;}    
.box4 > div.timing19 {animation: move1 3s 10 cubic-bezier(0, 1.42, 0.75, -0.27) 0.2s;}    
.box4 > div.timing20 {animation: move1 3s 10 cubic-bezier(0, 1.42, 0.75, -0.27) 0.3s;}     
.box4 > div.timing21 {animation: move1 3s 10 cubic-bezier(0, 1.42, 0.75, -0.27) 0.4s;}

animation-direction normal reverse alternate alternate-reverse

direction
.box5 {height: 300px;}
.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-modeStart

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 {height: 300px;}
.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 zoomInDown2

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