animation
animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state
종류 | 예시 |
---|---|
animation-name | @keyframe에 지정된 이름을 설정합니다. |
animation-duration | 애니메이션이 실행되는 시간을 설정합니다. |
animation-timing-function | 애니메이션 키프레임 움직임을 설정합니다. |
animation-delay | 애니메이션이 시작되기 전까지 시간을 설정합니다. |
animation-iteration | 애니메이션 반복 횟수를 설정합니다. |
animation-derection | 애니메이션 방향을 설정합니다. |
animation-fill-mode | 애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다. |
animation-play-state | 애니메이션 실행 상태를 설정합니다. |
transtion
transtion : property | duration | timing-function | delay
종류 | 예시 |
---|---|
transition-property | 트렌지션을 적용할 CSS 속성 대상을 설정합니다. |
transition-druation | 트렌지션 작동시간을 설정합니다. |
transition-timing-function | 트렌지션 움직임 효과를 설정합니다. |
transition-delay | 트렌지션이 시작되기 전까지 시간을 설정합니다. |
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) | 버지니아 곡선 값을 만들어서 설정합니다. |
timing-function
timing-function
linear
ease
ease-in
ease-out
ease-in-out
.timing1.show {animation: move 2s 1 linear;}
.timing2.show {animation: move 2s 1 ease;}
.timing3.show {animation: move 2s 1 ease-in;}
.timing4.show {animation: move 2s 1 ease-out;}
.timing5.show {animation: move 2s 1 ease-in-out;}
@keyframes move {
0% {left: 0%;}
50% {left: calc(100% - 120px);}
100% {left: 0%;}
}
timing-function
timing-function
step-start
step-end
steps(4, start)
steps(4, end)
steps(10, start)
steps(10, end)
.timing6.show {animation: move 4s 1 step-start;}
.timing7.show {animation: move 4s 1 steps-end;}
.timing8.show {animation: move 4s 1 steps(4, start);}
.timing9.show {animation: move 4s 1 steps(4, end);}
.timing10.show {animation: move 4s 1 steps(10, start);}
.timing11.show {animation: move 4s 1 steps(10, end);}
timing-function
timing-function
timing12
timing13
timing14
timing15
timing16
.timing12.show {animation: move 3s 2 cubic-bezier(1,.24,0,.93);}
.timing13.show {animation: move 3s 2 cubic-bezier(.07,.91,0,.93);}
.timing14.show {animation: move 3s 2 cubic-bezier(.35,.99,.95,.08);}
.timing15.show {animation: move 3s 2 cubic-bezier(.94,1.37,.2,-0.12);}
.timing16.show {animation: move 3s 2 cubic-bezier(.92,.02,1,-0.07);}
animation-delay
animation-delay
timing17
timing18
timing19
timing20
.timing17.show {animation: move 3s 0.1s 2 ease;}
.timing18.show {animation: move 3s 0.3s 2 ease;}
.timing19.show {animation: move 3s 0.6s 2 ease;}
.timing20.show {animation: move 3s 0.9s 2 ease;}
animation-iteration-count
animation-iteration-count
timing21
timing22
timing23
timing24
.timing21.show {animation: move 1s 1 ease;}
.timing22.show {animation: move 1s 2 ease;}
.timing23.show {animation: move 1s 3 ease;}
.timing24.show {animation: move 1s infinite ease;}
animation-direction
animation-direction
timing25
.timing25.normal {animation: move2 4s 5 ease normal;}
.timing25.reverse {animation: move2 4s 5 ease reverse;}
.timing25.alternate {animation: move2 4s 5 ease alternate;}
.timing25.alternate-reverse {animation: move2 4s 5 ease alternate-reverse;}
@keyframes move2 {
0% {left: 0; top: 0;}
25% {left: calc(100% - 120px); top: 0;}
50% {left: calc(100% - 120px); top: calc(100% - 120px);}
75% {left: 0; top: calc(100% - 120px);}
100% {left: 0; top: 0;}
}
animation-fill-mode
animation-fill-mode
timing26
timing27
timing28
timing29
.timing26.show {animation: move3 3s 1 ease; animation-fill-mode: none;}
.timing27.show {animation: move3 3s 1 ease; animation-fill-mode: forwards;}
.timing28.show {animation: move3 3s 1 ease; animation-fill-mode: backwards;}
.timing29.show {animation: move3 3s 1 ease; animation-fill-mode: both;}
@keyframes move3 {
0% {left: 0%;}
100% {left: calc(100% - 120px);}
}
animation-play-state
animation-play-state
timing30
.timing30.running {animation: move2 4s 100 ease; animation-play-state: running;}
.timing30.paused {animation: move2 4s 100 ease; animation-play-state: paused;}
Animation.css
Animation.css
timing31
timing32
timing33
timing34
timing35
timing36
timing37
.timing.bg9 > div.ani1 {animation: wobble 1s 10 ease;}
.timing.bg9 > div.ani2 {animation: headShake 1s 10 ease;}
.timing.bg9 > div.ani3 {animation: tada 1s 10 ease;}
.timing.bg9 > div.ani4 {animation: backInRight 1s 10 ease;}
.timing.bg9 > div.ani5 {animation: backOutLeft 1s 10 ease;}
.timing.bg9 > div.ani6 {animation: flash 1s 10 ease;}
.timing.bg9 > div.ani7 {animation: rubberBand 1s 10 ease;}