@Keyframes
@Keyframes
at-rule
μ μ λλ©μ΄μ
μ€κ°μ€κ°μ νΉμ μ§μ λ€μ κ±°μΉ μ μλ ν€νλ μλ€μ μ€μ νμ¬, CSS μ λλ©μ΄μ
κ³Όμ μ μ€κ° λμμ λ³΄λ€ λ μΈλ°νκ² μ μ΄ν μ μκ² νλ€.
transition
vsanimation
μ°¨μ΄μ
transition
- νΈλ¦¬κ±° μμκ° νμνλ€.
=>:hover
,:focus
λ±- μμ μνμ μ’ λ£ μν μ¬μ΄μμ λμ
=> κ°λ¨ν μ λλ©μ΄μ μ μ¬μ©
=>button
,dropdown menu
λ±
animation
- μμ μν/μ’ λ£ μνμ κ΄κ³μμ΄ λμ κ°λ₯
=> λμμ΄ λμ κ°λ₯, κ²½κ³κ° μμanimation
μμ±μ@Keyframes
λ₯Ό μ΄μ©ν΄ νλ μ μΆκ° κ°λ₯
@Keyframes
κ·μΉ@Keyframes
κ·μΉμ μ λλ©μ΄μ
μ½λλ₯Ό μ§μ νλ€.from
, to
ν€μλ μ¬μ© κ°λ₯ @keyframes animationname {
keyframes-selector {
css-styles;
}
}
animationname | μ λλ©μ΄μ μ΄λ¦ μ μ |
keyframes-selector | μ λλ©μ΄μ
μ§μ μκ°μ λ°±λΆμ¨ κ° : 0%(from) -100%(to) |
css-styles | CSS μ€νμΌ μμ± μ§μ |
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
/* keyframes μμμ !importantλ 무μλλ€. */
@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* ignored */
to {top: 200px;}
}
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation
μ λ¨μΌ μμ±λ€μ μΆμ½ν
animation-name
: μ λλ©μ΄μ
μ νΈμΆνκΈ° μν μ΄λ¦
=> keyframes μ΄λ¦κ³Ό λμΌ
animation-duration
: μ λλ©μ΄μ
μ μμλΆν° μ’
λ£κΉμ§ μ΄ μ§μ μκ° μ§μ
=> λ¨μ : s, ms
=> μμ
κ°λ§ κ°λ₯
=> 0
μ΄λ μμ
λ‘ μ§μ νμ κ²½μ° μ λλ©μ΄μ
μ΄ μ€νλμ§ μλλ€.
=> transition-duration
κ³Ό λΉμ·
animation-timing-function
: μ λλ©μ΄μ
μ μ¬μ μλ μ‘°μ
=> ease | linear | ease-in | ease-out | cubic-bezier(n, n, n, n)
λ±
=> transition-timing-function
κ³Ό λΉμ·
animation-delay
: μ λλ©μ΄μ
μμμ μ§μ°μν€κ³ μΆμ κ²½μ° μ§μ
=> 0 | now
: λ°λ‘ μ¬μ
=> μμ
: μ§μ λ μκ°μ΄ μ§λ μ΄νμ νλ μλΆν° μ λλ©μ΄μ
μμ
animation-iteration-count
: μ λλ©μ΄μ
μ¬μ νμ μ§μ
=> κΈ°λ³Έ κ°μ 1
=> 0 | μμ
: μ¬μλμ§ μμ
=> μ€μ
: μ¬μ λμ€ μ²« λ²μ§Έ νλ μμΌλ‘ λμκ° μ’
λ£
=> infinite
: 무ν λ°λ³΅
animation-direction
: μ λλ©μ΄μ
μ μ¬μ λ°©ν₯ μ€μ
=> normal
: μλ°©ν₯ μ¬μ
=> reverse
: μλ°©ν₯ μ¬μ
=> alternate
: μλ°©ν₯ μμ, μλ°©ν₯κ³Ό λ²κ°μ μ¬μ
=> alternate-reverse
: μλ°©ν₯ μμ, μλ°©ν₯κ³Ό λ²κ°μ μ¬μ
animation-fill-mode
: μ λλ©μ΄μ
μ΄ μ¬μλμ§ μμ λ (μμ μ , μ’
λ£ ν λλ λ λ€) μμμ λν μ€νμΌ μ§μ
=> none
: κΈ°λ³Έκ°, μ€νμΌμ μ μ©νμ§ μμ
=> forwards
: λ§μ§λ§ ν€νλ μμ μ€νμΌμ μ μ§, μ λλ©μ΄μ
λ°©ν₯μ΄λ λ°λ³΅ νμ λ°λΌ λ¬λΌμ§
=> backwards
: 첫 λ²μ§Έ ν€νλ μμ μ€νμΌ κ°μ κ°μ Έμ€κ³ , animation-delay
λμ μ΄ κ°μ μ μ§
=> both
: forwards
μ backwards
μ κ·μΉμ λ°λ₯΄λ©° μ λλ©μ΄μ
μμ±μ μλ°©ν₯μΌλ‘ νμ₯
animation-play-state
: μ λλ©μ΄μ
μ μ¬μ μ¬λΆ μ€μ
=> running
: μ¬μ
=> paused
: μΌμμ μ§
@Keyframes
μμ perspective
: 3D-positioned element
μ μκ·Όλ²μ μ 곡νκΈ° μν΄ z=0 νλ©΄κ³Ό μ¬μ©μ μ¬μ΄μ 거리λ₯Ό κ²°μ /* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspecive: revert;
perspective: unset;
none | perspective transfrom μ΄ μ μ©λμ§ μμμ λνλ |
<length> | z=0 νλ©΄κ³Ό μ¬μ©μ μ¬μ΄μ 거리λ₯Ό λνλ΄λ κΈΈμ΄ |
perspective-origin
perspective-origin
: λ·°μ΄κ° λ³΄κ³ μλ μμΉλ₯Ό κ²°μ <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>perspective</title>
<style>
.μλ³Έ {
display: flex;
justify-content: space-between;
width: 1000px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 400px;
}
.νμ ν¨λ {
width: 200px;
height: 200px;
background: aqua;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="μλ³Έ">
<div class="νμ ν¨λ"></div>
<div class="νμ ν¨λ"></div>
<div class="νμ ν¨λ"></div>
<div class="νμ ν¨λ"></div>
<div class="νμ ν¨λ"></div>
<div class="νμ ν¨λ"></div>
</div>
</body>
</html>
μ μμ μ κ²½μ°, κ°μ κ°λλ‘ μμ§μλλ° μ λκ°μ λ°μ€λ‘ λμ€μ§ μμμκΉ?
transform-style
: μμμ μμ μμλ₯Ό 3D 곡κ°/νλ©΄ λ°°μΉ μ¬λΆ μ€μ , μ΄ μμ±μ μμλμ§ μλλ€.
κ° | μ€λͺ |
---|---|
flat | μμμ μμ μμλ₯Ό μμ μ체μ νλ©΄μ λ°°μΉ |
preserve-3d | μμμ μμ μμλ₯Ό 3D 곡κ°μ λ°°μΉ |
/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;
/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: unset;
backface-visibility
: μμμ λ·λ©΄μ μ¬μ©μκ° λ³Ό μ μλμ§ μ¬λΆ μ€μ
μμμ λ·λ©΄μ μλ©΄μ΄ κ±°μΈμ΄ λΉμΉ κ²μ²λΌ 보μΈλ€. 2Dμμλ 보μ΄μ§ μμ§λ§ transform
μΌλ‘ μμκ° 3D 곡κ°μμ νμ ν λ λ·λ©΄μ΄ λ³΄μΌ μ μλ€.
κ° | μ€λͺ |
---|---|
visible | μ¬μ©μ μͺ½μΌλ‘ λλ Έμ λ λ·λ©΄μ΄ 보μ |
hidden | μ¬μ©μμκ² λ·λ©΄μ 보μ΄μ§ μκ² ν¨ |
/* Keyword values */
backface-visibility: visible;
backface-visibility: hidden;
/* Global values */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: revert;
backface-visibility: unset;
μ°Έκ³ λ§ν¬