CSS μ λλ©μ΄μ
μμ κ°μ₯ μ€μν μμλ @keyframes
(μ΄ν ν€νλ μμ¦)μ΄λ€. CSS λ¬Έλ² μ€ νλλ‘ μ λλ©μ΄μ
μ΄ λ§λ€μ΄μ§λ λΆλΆμ΄λ€. ν€νλ μμ¦λ₯Ό νμλΌμΈ μμ νλμ μ€ν
μ΄μ§(ꡬκ°)λ€ μ΄λΌκ³ μκ°νλ©΄ λλ€. ν€νλ μΈμ¦ μμμ μ€ν
μ΄μ§λ€μ μ μνκ³ κ° κ΅¬κ°λ§λ€ λ€λ₯Έ μ€νμΌμ μ μ©μν¬ μ μλ€.
μμλ₯Ό νλ λ€μ΄μ cssμ ν€νλ μμ¦λ₯Ό λ§λ€μ΄λ³΄μ.
@keyfames tutsFade{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
//νΌμΌν°μ§ λμ
@keyframes tutsFade{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
//μ΄κ±Έ μ€μ¬μ μΈ μλ μλ€.
@keyframes tutsFade{
to{
opacity: 0;
}
}
μ λλ©μ΄μ μμ±μ μμ μ ν€νλ μμ¦λ‘ λΆλ¦¬λ©΄ CSS μ νμ μμ μ‘΄μ¬νλ€. μ λλ©μ΄μ μ μ¬λ¬κ°μ μμ±μ κ°μ§ μ μλ€.
animation-name
: @keyframesμ΄λ¦animation-duration
: νμνλ μ, μ λλ©μ΄μ
μμλΆν° λ§μ§λ§κΉμ§ μ΄ μκ°animation-titming-function
: μ λλ©μ΄μ
μλ μ‘°μ (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier)animation-delay
: μ λλ©μ΄μ
μ΄ μμνκΈ° μ μ§μ°μκ°animation-direction
: loopλ°©ν₯ (μ λ°©ν₯μΌλ‘ λ°λ³΅, μλ°©ν₯μΌλ‘ λ°λ³΅, λ²κ°μκ°λ©° λ°λ³΅)animation-iteration-count
: λ°λ³΅ νμanimation-fill-mode
: μ λλ©μ΄μ
μμ/λ μν μ μ΄(none, forwards, backwards, both).element {
animation-name: tutsFade;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
//μ΄κ±Έ μ€μ¬μ
.element {
animation: tutsFade 4s 1s infinite linear alternate;
}
1μ΄μ μ§μ¬λκ° ν 4μ΄μ μ λλ©μ΄μ κΈΈμ΄λ₯Ό κ°μ§ loopλ°©ν₯μ λ²κ°μκ°λ©΄μ μ ν μλλ‘ λ¬΄ν λ°λ³΅ κΉλΉ‘μ΄λ ν¨κ³Ό
λ²€λ ν리ν½μ€λ₯Ό μ¬μ©νμ¬ κ° λΈλΌμ°μ μ§μμ΄ μ΅λν μ λλλ‘ μ€μ ν΄μ€λ€.
-webkit-
-moz-
-o-
-ms-
μ λλ©μ΄μ μμ±κ³Ό λ²€λ ν리 ν¨κ» μ¬μ©νκΈ°
.element {
-webkit-animation: tutsFade 4s 1s infinite linear alternate;
-moz-animation: tutsFade 4s 1s infinite linear alternate;
-ms-animation: tutsFade 4s 1s infinite linear alternate;
-o-animation: tutsFade 4s 1s infinite linear alternate;
animation: tutsFade 4s 1s infinite linear alternate;
}
@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }
ππΎ μ¬λ¬κ° μ λλ©μ΄μ
μ μ©
μ λλ©μ΄μ
μ μ¬λ¬κ° μ¬μ©νλ €λ©΄ μΌν(,)λ₯Ό μ΄μ©ν΄ λΆλ¦¬ν μ μλ€.
.element {
animation: tutsFade 4s 1s infinite linear alternate, //μ΄ λΆλΆ
tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
to {
opacity: 0;
}
}
@keyframes tutsRotate {
to {
transform: rotate(180deg);
}
}
//htmlνμΌμμ divμμ±νλ€
<div></div>
// css μ μ©
div {
width: 200px;
height: 200px;
background-color: coral;
}
//ν€νλ μ μ μΈ
div {
width: 200px;
height: 200px;
background-color: coral;
}
//μ€ν
μ΄μ§λ§λ€ μ€νμΌ μ€μ . border-radiusλ₯Ό μ¬μ©ν΄ λͺ¨μ리λ₯Ό κ°μ
@-webkit-keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
}
25% {
border-radius:50% 0 0 0;
}
50% {
border-radius:50% 50% 0 0;
}
75% {
border-radius:50% 50% 50% 0;
}
100% {
border-radius:50%;
}
}
//κ·Έλ° λ€μ λ°°κ²½μ μ€μ
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
}
100% {
border-radius:50%;
background:darksalmon;
}
}
//divμ λμμΆκ°
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
transform:rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
transform:rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
transform:rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
transform:rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
transform:rotate(180deg);
}
}
//μ λλ©μ΄μ
μΆκ°
div {
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s 1s infinite alternate;
}
:: timing-function μΆκ°
μ λλ©μ΄μ
μ μλλ₯Ό μ μ΄ν μ μλ€. μ κ΅ν κ°μ΄ νμν κ²½μ°κ° μμ΄ μλμΌλ‘ κ³μ°ν기보λ€λ μ¬μ΄νΈλ₯Ό ν΅ν΄ μλμΌλ‘ κ³μ°ν΄μ£Όλ κ°μ μ΄μ©νλκ² λ νΈνκ³ λ μ κ΅νλ©° λ ν¨μ¨μ μ΄λ€.
ref. https://matthewlein.com/tools/ceaser
cubic-bezier functionμΌλ‘ νμ±μλ κ³ λ¬΄κ³΅κ°μ ν¨κ³Όλ₯Ό μΆκ°νλ € ν λ
//λ² μ§μ΄ 곑μ μ μνλλλ‘ λ§λ ν μ€λν«μΌλ‘ μ λλ©μ΄μ
μ timing-functionκ°μ κ΅μ²΄
div {
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
//μμ±λ css
div {
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
transform:rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
transform:rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
transform:rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
transform:rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
transform:rotate(180deg);
}
}