Animation

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

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

Transition

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

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

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

liner

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;}
@keyframes move1{
    0% {left: 0%;}
    50% {left: calc(100% - 70px);} /*모바일 & 홈페이지 박스 크기에 넘치지 않고 크기에 맞게*/
    100% {left: 0%;}
}

$(".btn1").click(function(){
$(".box1 > div").eq(0).addClass("timing1");
$(".box1 > div").eq(1).addClass("timing2");
$(".box1 > div").eq(2).addClass("timing3");
$(".box1 > div").eq(3).addClass("timing4");
$(".box1 > div").eq(4).addClass("timing5");
});

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);}
$(".btn2").click(function(){
$(".box2 > div").eq(0).addClass("timing6");
$(".box2 > div").eq(1).addClass("timing7");
$(".box2 > div").eq(2).addClass("timing8");
$(".box2 > div").eq(3).addClass("timing9");
$(".box2 > div").eq(4).addClass("timing10");
$(".box2 > div").eq(5).addClass("timing11");
});

Animation Steps

See the Pen animation steps by Yang (@yangareum) 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(1,0,0,0);}
.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);}
$(".btn3").click(function(){
$(".box3 > div").eq(0).addClass("timing12");
$(".box3 > div").eq(1).addClass("timing13");
$(".box3 > div").eq(2).addClass("timing14");
$(".box3 > div").eq(3).addClass("timing15");
$(".box3 > div").eq(4).addClass("timing16");
});

animation-timing-function : Cubic-bezier Start

cubic1

cubic2

cubic3

cubic4

cubic5

.box4 > div.timing17 {animation: move1 3s 10 cubic-bezier(0.49,1.49,0.46,-0.13)0s;}
.box4 > div.timing18 {animation: move1 3s 10 cubic-bezier(0.49,1.49,0.46,-0.13)0.1s;}
.box4 > div.timing19 {animation: move1 3s 10 cubic-bezier(0.49,1.49,0.46,-0.13)0.2s;}
.box4 > div.timing20 {animation: move1 3s 10 cubic-bezier(0.49,1.49,0.46,-0.13)0.3s;}
.box4 > div.timing21 {animation: move1 3s 10 cubic-bezier(0.49,1.49,0.46,-0.13)0.4s;}
$(".btn4").click(function(){
$(".box4 > div").eq(0).addClass("timing17");
$(".box4 > div").eq(1).addClass("timing18");
$(".box4 > div").eq(2).addClass("timing19");
$(".box4 > div").eq(3).addClass("timing20");
$(".box4 > div").eq(4).addClass("timing21");
});

animation-direction normal reverse alternate alternate-reverse

normal

.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;}
}
$(".btnStart5 a").click(function(){
var text = $(this).text();
// alert(text);
$(".box5 > div").removeClass().addClass(text);
});

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);}
}
$(".btn6").click(function(){
$(".box6 > div").eq(0).addClass("timing22");
$(".box6 > div").eq(1).addClass("timing23");
$(".box6 > div").eq(2).addClass("timing24");
$(".box6 > div").eq(3).addClass("timing25");
$(".box6 > div").eq(4).addClass("timing26");
});

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;}
$(".btn7").click(function(){
$(".box7 > div").eq(0).addClass("timing26");
$(".box7 > div").eq(1).addClass("timing27");
$(".box7 > div").eq(2).addClass("timing28");
$(".box7 > div").eq(3).addClass("timing29");
});

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;}
$(".btnStart8 a").click(function(){
var text = $(this).text();
// alert(text);
$(".box8 > div").removeClass().addClass(text);
});

animate.css

bounce rubberBand tada wobble jello rotateInDown zoomInDown hinge lightSpeenIn show

animate

Professional web publishers

mm2800.dothome.co.kr

Animation

Animation

Transition

animation-timing-function Start

animation-timing-function : steps Start

Animation Steps

animation-timing-function : Cubic-bezier Start

animation-timing-function : Cubic-bezier Start

animation-direction normal reverse alternate alternate-reverse

animation-fill-mode Start

animation-iteration-count Start

animation-play-state running paused

animate.css

bounce rubberBand tada wobble jello rotateInDown zoomInDown hinge lightSpeenIn show

Yang A Reum

Professional web publishers

mm2800.dothome.co.kr

Animation

Animation

Transition

animation-timing-function Start

animation-timing-function : steps Start

Animation Steps

animation-timing-function : Cubic-bezier Start

animation-timing-function : Cubic-bezier Start

animation-direction normal reverse alternate alternate-reverse

animation-fill-mode Start

animation-iteration-count Start

animation-play-state running paused

animate.css bounce rubberBand tada wobble jello rotateInDown zoomInDown hinge lightSpeenIn show

Yang A Reum

animate.css

bounce rubberBand tada wobble jello rotateInDown zoomInDown hinge lightSpeenIn show