Transition
: μμμ μ ν ν¨κ³Όλ₯Ό μ§μ νλ λ¨μΆμμ±(κ°λ³μμ±μ΄ μλ€λ λ»)
transition : μμ±λͺ μ§μμκ° νμ΄λ°ν¨μ λκΈ°μκ° ;
transition-property : (all) μ νμ μ¬μ©ν μμ± μ΄λ¦μ μ§μ
* transition-duration : (0) μ Όνμ μ§μ μκ° μ§μ
transition-timing-function : (ease) μ νμ νμ΄λ° ν¨μλ₯Ό μ§μ
transition-delay : (0) μ νμ λͺ μ΄ λ€μ μμν μ§ λκΈ°μκ° μ§μ
μΌνλ₯Ό ν΅ν΄ μ¬λ¬κ°μ μμ± μ λ ₯ κ°λ₯
div{ transition :
width : .5s,
color : 2s; }
Transform
: μμμ λ³ν ν¨κ³Ό
transform : λ³νν¨μ1 λ³νν¨μ2 λ³νν¨μ3...;
μκ·Όλ² ν¨μ(perspective)λ 맨μμ!
- transform-style :μμμμμ 3d ν¨κ³Ό μ μ© μ¬λΆ
flat (κΈ°λ³Έ) : μ μ©νμ§ μμ
preserve-3d : μ μ©ν¨
μ μ© λμ | κΈ°μ€μ μ€μ | |
μμ± perspective :600px | κ΄μ°° λμμ λΆλͺ¨ | perspective-origin |
ν¨μ transform: perspective(600px) | κ΄μ°° λμ | transform-origin : λ³νμ κΈ°μ€μ νμ μ€μ¬μ (50% 50%) |
Backface-visibility
: 3D λ³νμΌλ‘ νμ λ μμμ λ·λ©΄ μ¨κΉ μ¬λΆ
backface-visibility : visible (κΈ°λ³Έ) λ·λ©΄ 보μ
hidden λ·λ©΄ μ¨κΉ
μ°Έκ³ λ§ν¬
css3
https://happy-noether-c87ffa.netlify.app/presentations/level2/css3/
CSS ++
happy-noether-c87ffa.netlify.app
Animation
: @keyframse μ λμμ μ μ΄νλ μμ±
aniamtion κ°λ³ μμ± | κΈ°λ³Έκ° | ||
animation-name | μ΄λ¦ | none | |
animation-duration | μ§μμκ° | 0s | |
animation-timing-function | νμ΄λ°ν¨μ | ease | |
animation-delay | λκΈ°μκ° | 0s | |
animation-iteration-count | λ°λ³΅νμ | 1 | μ«μ / infinite |
animation-direction | λ°©ν₯ | normal | reverse / alternate / alternate-reverse |
animation-fill-mode | μ νμν | none | forwards / backwords / both |
animation-play-state | λμμν | running | paused (μΌμμ μ§) |
@keyframse
: animation μ λ§λ€κΈ° μν κ° κ΅¬κ°μ μ€μ
@keyframes rolling {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
μΆμ² : (KDT FE2) ν λ²μ λλ΄λ νλ‘ νΈμλ κ°λ° μ΄κ²©μ°¨ ν¨ν€μ§ Online. λ°μμ κ°μ¬λ
'π TIL' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[220412] grid (0) | 2022.04.13 |
---|---|
[220412] μ€νλ² μ€ μμ (0) | 2022.04.12 |
[220408] Flex (0) | 2022.04.08 |
[220407]Position (0) | 2022.04.08 |
[220406]CSS μμ± (0) | 2022.04.06 |