π»animationπ»
- μΉ νμ΄μ§μμ μμλ€μκ² μ λλ©μ΄μ ν¨κ³Όλ₯Ό λΆμ¬ν λ μ¬μ©νλ€.
- css κ°μ²΄ μμ§μμ μ‘°μν λλ μλ λκ°μ§ λ°©λ²μ΄ μλ€.
- 1. transition : λ¨μν μμ§μ
- 2. animation + transtion : μΈλ°νκ² ν΅μ κ°λ₯νλ€.
πΆμμ±
- animation-name:
- @keyframes κ·μΉμμ μ μν μ λλ©μ΄μ μ μ°κ²°νλ€.
- animation-duration
- μ λλ©μ΄μ μ ν μ£ΌκΈ°λ₯Ό μλ£νλ λ° κ±Έλ¦¬λ μκ°μ μ§μ νλ€.
- μ΄(s) λλ λ°λ¦¬μ΄(ms) λ¨μλ‘ κ°μ μ€μ ν μ μλ€.
- animation-timing-function
- μ λλ©μ΄μ μ μ§ν μλλ₯Ό μ‘°μ νλ ν¨μλ₯Ό μ§μ νλ€.
- μλ₯Ό λ€μ΄, ease, linear, ease-in, ease-out, ease-in-out λ±μ΄ μλ€.
- animation-delay
- μ λλ©μ΄μ μ΄ μμνκΈ° μ μ λκΈ°νλ μκ°μ μ§μ νλ€.
- μ΄(s) λλ λ°λ¦¬μ΄(ms) λ¨μλ‘ κ°μ μ€μ ν μ μλ€.
- animation-iteration-count
- μ λλ©μ΄μ μ λ°λ³΅ νμλ₯Ό μ§μ νλ€.
- 무ν λ°λ³΅μ μ€μ νλ €λ©΄ infiniteλ₯Ό μ¬μ©νλ€.
- animation-direction
- μ λλ©μ΄μ μ λ°©ν₯μ μ§μ νλ€.
- normal : μ λ°©ν₯
- reverse : μλ°©ν₯
- alternate : λ²κ°μκ°λ©° μ λ°©ν₯κ³Ό μλ°©ν₯μΌλ‘ μ§ν.
- animation-fill-mode
- μ λλ©μ΄μ μ μμ λ° μ’ λ£ μμ μ μ€νμΌμ μ€μ νλ€.
- forwards : μ λλ©μ΄μ μ΄ λλλ©΄ λ§μ§λ§ νλ μμ μ€νμΌμ μ μ§νλ€
- backwards : μ λλ©μ΄μ μ΄ μμλκΈ° μ μ μ€νμΌμ μ€μ νλ€.
- animation-play-state
- μ λλ©μ΄μ μ μ€ννκ±°λ μΌμ μ€μ§νλ€.
πΆνλ μ μ μνκΈ°
@keyframes key1 {
/* μ΄λ€ μμ±κ³Ό μ΄λ€ λ³νκ°μ κ°μ§ κ²μΈμ§ κΈ°μ¬νλ€ */
from {
width: 150px;
}
to {
width: 500px;
}
}πΆanimation μ μ©νκΈ°
<body>
<div id="box1" class="box">μμ1</div>
<div id="box2" class="box">μμ2</div>
<div id="box3" class="box">μμ3</div>
</body>body {
padding-bottom: 300px;
}
.box {
border: 1px solid black;
width: 150px;
height: 150px;
margin: 30px;
}
#box1 {background-color: tomato;}
#box2 {background-color: gold;}
#box3 {background-color: cornflowerblue;}
@keyframes key1 {
from {
width: 150px;
}
to {
width: 500px;
}
}
body:hover #box1 {
animation-name: key1;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
πΆκ΅¬κ°λ³ ν΅μ
0% : 0μ΄
50% : 0.5μ΄
100% : 1μ΄
@keyframes key2 {
0% {width: 150px;}
50% {width: 200px;}
100% {width: 500px;}
}
body:hover #box2 {
animation-name: key2;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 3;
}
πΆκ³΅ νκΈ°κΈ°
<body>
<div id="box">
<div id="ball"></div>
</div>
</body>#box {
border: 20px solid black;
width: 400px;
height: 800px;
}
#ball {
background-color: cornflowerblue;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 auto;
animation-name: key-ball;
animation-duration: .7s;
/* animation-fill-mode: forwards; */
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in;
}
@keyframes key-ball {
from {transform: translate(0px, 0px);}
to {transform: translate(0px, 750px);}
}
'WEB > CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [CSS] μμ λ°°μΉ : grid (0) | 2023.10.04 |
|---|---|
| [CSS] μμ λ°°μΉ : flex box (0) | 2023.10.04 |
| [CSS] μ λλ©μ΄μ ν¨κ³Ό : Transition, μ ν (0) | 2023.09.27 |
| <div>, <nav> μ°¨μ΄μ (0) | 2023.09.27 |
| [CSS] Transform, λ³ν (0) | 2023.09.27 |
