728x90
λ°μν
CSS animation
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 | μ λλ©μ΄μ μ€ν μνλ₯Ό μ€μ ν©λλ€. |
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) | λ²μ§λμ 곑μ κ°μ λ§λ€μ΄μ μ€μ ν©λλ€. |
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: 100%;}
100% {left: 0%;}
}
timing-function
step-start
step-end
steps(4, start)
steps(4, end)
steps(10, start)
steps(10, start)
.timing6.show {animation: move 4s 1 step-start;}
.timing7.show {animation: move 4s 1 step-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);}
cubic-bezier
timing12
timing13
timing14
timing15
timing16
.timing12.show {animation: move 3s 2 cubic-bezier(0,.71,0,1);}
.timing13.show {animation: move 3s 2 cubic-bezier(0,.71,1,-0.28);}
.timing14.show {animation: move 3s 2 cubic-bezier(1,-0.52,1,-0.28);}
.timing15.show {animation: move 3s 2 cubic-bezier(1,.02,0,1.01);}
.timing16.show {animation: move 3s 2 cubic-bezier(.33,2.04,1,2.05);}
animation-delay
timing17
timing18
timing19
timing20
.timing17.show {animation: move 3s 0.1s 2 ease;}
.timing18.show {animation: move 3s 0.2s 2 ease;}
.timing19.show {animation: move 3s 0.3s 2 ease;}
.timing20.show {animation: move 3s 0.4s 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;}
.timing26.reverse {animation: move2 4s 5 ease reverse;}
.timing27.alternate {animation: move2 4s 5 ease alternate;}
.timing28.alternate-reverse {animation: move2 4s 5 ease alternate-reverse;}
animation-fill-mode
animation-direction
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-direction
timing31
.timing30.running {animation: move2 4s 100 ease; animation-play-state: running;}
.timing30.paused {animation: move2 4s 100 ease; animation-play-state: paused;}
728x90
λ°μν
'μ λλ©μ΄μ ' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
CSSμ λλ©μ΄μ μμ (1) | 2022.09.08 |
---|---|
SVG μ λλ©μ΄μ μμ (2) | 2022.09.08 |
μ λλ©μ΄μ - SVG (5) | 2022.09.07 |
λκΈ