Animation

Animation

Animation

animation: {name} {duration} {timing-fuction} {delay} {iteration} {direction} {fill-mode} {play-state}

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

Transition

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

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

Timing-function

Property	Descripiton
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

 
.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 : steps 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 bOadrK by HyeInLee (@leehye1204) on CodePen.

animation-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,0,0.15);}    
.box3 > div.timing16 {animation: move1 3s 10 cubic-bezier(0.49,1.49,0.46,-0.13);}

animation-timing-function : delay 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 {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;}
@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; 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;}
@keyframes move3 {
0% {left: 0%;}
100% {left: calc(100% - 70px);}
}

animation-iteration-count Start

count1

count2

count3

iteration

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

animation-play-state running paused

state

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

Animation-play-state

See the Pen WLdQaQ by HyeInLee (@leehye1204) on CodePen.

animation.css

bounce rubberBand tada wobble jello rotateInDown zoomInDown hinge lightSpeenIn ex

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; height: 70px; line-height: 70px;}
.box9 > div.wobble {animation: wobble 1s 10 ease; border-radius: 0; height: 70px; line-height: 70px;}
.box9 > div.jello {animation: jello 1s 10 ease; border-radius: 0; height: 70px; line-height: 70px;}
.box9 > div.rotateInDown {animation: rotateInDown 1s 10 ease; background: url(http://leehye1204.dothome.co.kr/assets/ico/icon.png); background-size: 100%;}
.box9 > div.zoomInDown {animation: zoomInDown 1s 10 ease; background: url(http://leehye1204.dothome.co.kr/assets/ico/icon.png); background-size: 100%; border-radius: 5%;}
.box9 > div.hinge {animation: hinge 3s 10 ease; background: url(http://leehye1204.dothome.co.kr/assets/ico/icon.png); background-size: 100%; border-radius: 5% 80px;}
.box9 > div.lightSpeenIn {animation: lightSpeenIn 3s 10 ease; background: url(http://leehye1204.dothome.co.kr/assets/ico/icon.png); background-size: 100%;}
.box9 > div.ex {animation: tada 2s 10 ease; background: url(http://leehye1204.dothome.co.kr/assets/ico/icon.png); background-size: 100%; border-radius: 20px 20px;}

@keyframes bounce {
    from, 20%, 53%, 80%, to {transform: translate3d(0,0,0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
    40%, 43% {transform: translate3d(0,-30px,0); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}
    70% {transform: translate3d(0,-15px,0); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}
    90% {transform: translate3d(0,-4px,0);}
}

@keyframes rubberBand {
    0%   {transform: scale3d(1,1,1);}
    30%  {transform: scale3d(1.25,0.75,1);}
    40%  {transform: scale3d(0.75,1.25,1);}
    50%  {transform: scale3d(1.25,0.85,1);}
    65%  {transform: scale3d(0.95,1.05,1);}
    75%  {transform: scale3d(1.05,0.95,1);}
    100% {transform: scale3d(1,1,1);}
}

 @keyframes tada {
    0% {transform: scale3d(1,1,1);}
    10%, 20% {transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg);} 
    30%, 50%, 70%, 90% {transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);}
    40%, 60%, 80% {transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
    100% {transform: scale3d(1,1,1);}  
}

@keyframes wobble {
    0%   {transform: translate3d(0,0,0);}
    15%  {transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);}
    30%  {transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);}
    45%  {transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);}
    60%  {transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);}
    75%  {transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);}
    100% {transform: translate3d(0,0,0);}
}

@keyframes jello {
    0%, 11.1%, 100% {transform: translate3d(0,0,0);}
    22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3% {transform: skewX(6.25deg) skewY(6.25deg);}
    44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}
@keyframes rotateInDown {
    from {transform: rotate3d(0,0,1,-45deg); transform-origin: left bottom; opacity: 0;}
    to   {transform: rotate3d(0,0,0); transform-origin: left bottom; opacity: 1;}
}

@keyframes zoomInDown {
    from {opacity: 0; transform: scale3d(0.1,0.1,0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}
    60%  {opacity: 1; transform: scale3d(0.475,0.475,0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
}

@keyframes hinge {
    0%       {transform-origin: top left; animation-timing-function: ease-in-out; }
    20%, 60% {transform-origin: top left; transform: rotate3d(0,0,1,80deg); animation-timing-function: ease-in-out;}
    40%, 80% {transform-origin: top left; transform: rotate3d(0,0,1,60deg); opacity: 1; animation-timing-function: ease-in-out;}
    100%     {transform: translate3d(0, 700px, 0); opacity: 0;}
}

@keyframes lightSpeenIn {
    0%   {opacity: 0; transform: translate3d(100%, 0, 0) skew(-30deg);}
    60%  {opacity: 1; transform: skew(20deg);}
    80%  {transform: skew(-5deg);}
    100% {transform: translate3d(0, 0, 0);}
}

@keyframes tada {
    from {opacity: 0; transform: scale3d(0.1,0.1,0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}
    40% {opacity: 1; transform: scale3d(0.475,0.475,0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
    60%  {opacity: 1; transform: scale3d(0.627,0.627,0.627) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.275, 0.99, 0.64, 1);}  
    80%  {opacity: 1; transform: scale3d(0.888,0.888,0.888) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.422, 1, 0.98, 1);}  
    to  {opacity: 1; transform: scale3d(0.1,0.1,0.1) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}  
}