Animation
animation : {name} {duration} {timing-function} {delay} {intration-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
timing-function : {property} {duration} {timing-function} {delay}
| Porperty |
Description |
| linaer |
일정한 간격으로 움직입니다. |
| ease |
처음에는 서서히 가속하고 마지막 부분에서 급격히 감속합니다. |
| ease-in |
처음에는 천천히 시작하고 마지막에 가속합니다. |
| ease-out |
처음에는 최대속도로 시작하고 마지막에 감속합니다. |
| ease-in-out |
처음에는 제로 속도에서 시작하고, 중간지점에서 최고 속도로 움직이고, 마지막 부분에서 서서히 감속합니다. |
| step-start |
애니메이션을 시작점에서만 표현 됩니다. |
| step-end |
애니메이션을 끝점에서만 표현됩니다. |
| steps(int, start/end) |
애니메이션을 단계별로 표현됩니다. |
| cubic-bezier(n,n,n,n) |
베이지 곡선 값을 만들어서 속도를 설정합니다. |
ainmation-timing-functionStart
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 : step 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,3,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,-1.6,1,4.15);}
.box3>div.timing16 {animation: move1 3s 10 cubic-bezier(0.49, 1.9, 0.86,-0.13)}
ainmation-timing-function : step Start
delay1
delay2
delay3
delay4
delay5
.box4>div.timing17 {animation: move1 3s 0s;}
.box4>div.timing18 {animation: move1 3s 0.5s;}
.box4>div.timing19 {animation: move1 3s 1.0s;}
.box4>div.timing20 {animation: move1 3s 1.5s;}
.box4>div.timing21 {animation: move1 3s 2s;}
.box5>div.timing22 {animation: move2 3s 10 normal}
.box5>div.timing23 {animation: move2 3s 10 reverse}
.box5>div.timing24 {animation: move2 3s 10 alternate}
.box5>div.timing25 {animation: move2 3s 10 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; }
.box5 {height: 300px;}
.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;}
@keyframes move3 {
0% {left: 0%;}
100% {left: calc(100% - 70px);}
}
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;}
.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