728x90
λ°μν
βοΈ CSS μ λλ©μ΄μ βοΈ
01. 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 | μ λλ©μ΄μ μ€ν μνλ₯Ό μ€μ ν©λλ€. |
02. transtion
transtion : property | durtion | timing-function | delay
μ’ λ₯ | μμ |
---|---|
transition-property | νΈλ μ§μ μ μ μ©ν CSS μμ± λμμ μ€μ ν©λλ€. |
transition-druation | νΈλ μ§μ μλμκ°μ μ€μ ν©λλ€. |
transition-timing-function | νΈλ μ§μ μμ§μ ν¨κ³Όλ₯Ό μ€μ ν©λλ€. |
transition-delay | νΈλ μ§μ μ΄ μμλκΈ° μ κΉμ§ μκ°μ μ€μ ν©λλ€. |
03. 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) | λ²μ§λμ 곑μ κ°μ λ§λ€μ΄μ μ€μ ν©λλ€. |
728x90
λ°μν
'CSS > Animation' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
ν μ€νΈ ν¨κ³Ό μ λλ©μ΄μ (3) | 2022.09.08 |
---|---|
κ±Έμ΄κ°μ (3) | 2022.09.08 |
SVG animation (5) | 2022.09.08 |
μ λλ©μ΄μ ν¨κ³Ό _ 무νλ 곡 (5) | 2022.09.05 |
μ λλ©μ΄μ λΉκΈλΉκΈ (5) | 2022.08.29 |
λκΈ