λͺ¨λ μΉμ μν HTML5+CSS3 λ°μ΄λΈ(8)
π λ€μ΄κ°κΈ°μ μμ
μ΄ κΈμ λͺ¨λ μΉμ μν HTML5+CSS3 λ°μ΄λΈ
μ 곡λΆνλ©° κΈ°μ΅ν΄λ λ΄μ©λ€μ κ°λ¨νκ² κΈ°λ‘ν κΈμ
λλ€.
μ±
μ λν μμΈν μ¬νμ λ§ν¬λ₯Ό μ°Έκ³ ν΄μ£ΌμΈμ. π
π 1. CSS3 λ³νκ³Ό μ λλ©μ΄μ
μ½λλ₯Ό μ λμ΄νκ³ μ£ΌμμΌλ‘ λμλλ νλ€(πλ‘ νμν΄λκ² μ΅λλ€.)μ κΈ°λ‘νλ € ν©λλ€. μ½λ μλ³Έμ λ§ν¬μμ λ°μΌμ€ μ μμ΅λλ€.
CSS λ³ν(transition)μ μ¬μ©νλ©΄ νλ©΄μ μ λλ©μ΄μ
(animation)μ ꡬνν μ μμ΅λλ€.
λν, CSS3 λ³νκ³Ό React, Vue.jsμμ κ²°ν©μ ν΅ν΄ λ λ€μν μ λλ©μ΄μ
μ ꡬμ±ν μ μμ΅λλ€.
λ³ν(transition) μμ±
CSS3μμ μμ§μμ ꡬννλ λ°©λ²μλ ν¬κ² transition(λ³ν)κ³Ό animation(μ λλ©μ΄μ ) μμ±μΌλ‘ λλμ΄μ§λλ€.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transition</title>
<style>
#graph {
width: 610px;
border: 3px solid black;
}
.bar {
width: 10px;
height: 50px;
background-color: orange;
margin: 5px;
background-color: orange;
/* π transition-duration: λ³νμ΄ μ§νλλ μκ°μ λνλ
λλ€. */
transition-duration: 5s;
/*
π transition-property μ transition-duration μ¬μ©λ²
μμ)
transition-property: background-color, width;
transition-duration: 11s, 16s;
-> λ³νμ μ μ©ν μμ±μ μ νκ³ κ°κ°μ μμ±μ λ³ν μ§ν μκ°μ μ ν΄μ€ μ μμ΅λλ€.
*/
}
#graph:hover > .bar {
width: 600px;
}
.bar:nth-child(1) {
/*
π transition-delay: μ΄λ²€νΈ(ex. hover)κ° λ°μ ν λͺ μ΄ λ€μ λ³νμ΄ μμλ κ²μΈμ§λ₯Ό λνλ
λλ€.
*/
transition-delay: 0s;
/*
π transition-timing-function: λ³ν μ§ν μ λμ λν μκ°μ ν¨μμ
λλ€.
cubic-beizer(x0, y0, x1, y1)κ³Ό κ°μ΄ μ¬μ©μ μ§μ ν¨μλ κ°λ₯ν©λλ€.
μ°Έκ³ : http://cubic-bezier.com/
*/
transition-timing-function: linear;
}
.bar:nth-child(2) {
transition-delay: 1s;
transition-timing-function: ease;
}
.bar:nth-child(3) {
transition-delay: 2s;
transition-timing-function: ease-in;
}
.bar:nth-child(4) {
transition-delay: 3s;
transition-timing-function: ease-in-out;
}
.bar:nth-child(5) {
transition-delay: 4s;
transition-timing-function: ease-out;
}
#graph:hover > .bar:nth-child(1) {
background-color: red;
width: 100px;
}
#graph:hover > .bar:nth-child(2) {
background-color: blue;
width: 300px;
}
#graph:hover > .bar:nth-child(3) {
background-color: green;
width: 400px;
}
#graph:hover > .bar:nth-child(4) {
background-color: yellow;
width: 200px;
}
#graph:hover > .bar:nth-child(5) {
background-color: pink;
width: 400px;
}
</style>
</head>
<body>
<h1>CSS3 Transition Graph</h1>
<div id="graph">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
λ³ν μμ±μ νλ²μ λνλ΄λ©΄ λ€μκ³Ό κ°μ΄ μ μ μ μμ΅λλ€.
div {
/*
π property duration function delay μμμ
λλ€.
κ°κ°μ propertyμ λ€λ₯Έ λ³νμ μ μ©ν μ μμ΅λλ€.
*/
transition: background-color 5s ease 2s, width 10s linear 5s;
}
ν€ νλ μκ³Ό μ λλ©μ΄μ (animation) μμ±
λ³ν(transition)κ³Ό μμ± λ° ν€μλμ μ°¨μ΄κ° μμ λΏ, μμμ΄ κ±°μ λΉμ·ν©λλ€.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Animation</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
#box {
position: absolute;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
background: linear-gradient(to bottom, #cb60b3, #db36a4);
animation-name: jayden; /* π μ μ©ν μ λλ©μ΄μ
μ΄λ¦μ μ§μ ν©λλ€. */
animation-duration: 2s; /* π μ λλ©μ΄μ
μ μ§μ μκ°μ μ§μ ν©λλ€. */
animation-iteration-count: infinite; /* π μ λλ©μ΄μ
μ΄ λ°λ³΅λ νμλ₯Ό μ ν©λλ€. */
animation-direction: alternate;
/*
π μ λλ©μ΄μ
μ μ§νλ°©ν₯μΌλ‘
`alternate` - fromμμ toλ‘ μ§ν ν toμμ fromμΌλ‘ λ€μ μ§νν©λλ€.
`normal` - fromμμ toλ‘λ§ μ§νν©λλ€.
*/
animation-timing-function: linear;
/*
π μ λλ©μ΄μ
μ§ν μ λμ λν μκ°μ ν¨μμ
λλ€.
cubic-beizer(x0, y0, x1, y1)κ³Ό κ°μ΄ μ¬μ©μ μ§μ ν¨μλ κ°λ₯ν©λλ€.
μ°Έκ³ : http://cubic-bezier.com/
*/
/*
π animation-play-state
μ λλ©μ΄μ
μ νλμ΄ μνλ₯Ό μ§μ νλ κ²μΌλ‘ λ€μκ³Ό κ°μ΄ μ¬μ©ν μ μμ΅λλ€.
.box:hover {
animation-play-state: paused;
}
μ¦, λ§μ°μ€λ₯Ό μ¬λ¦¬λ©΄ μ λλ©μ΄μ
μ΄ μ μ§(paused)κ° λ©λλ€.
μ΄μΈμλ inherit, initial, running, unset λ±μ μ¬λ¬ ν€μλκ° μμ΅λλ€.(MDN 곡μλ¬Έμ μ°Έκ³ )
*/
}
#box > h1 {
line-height: 200px;
}
/*
π ν€ νλ μ κ·μΉ(keyframes @-rule)μ΄λΌκ³ λΆλ₯΄λ©° CSS3μμ μ λλ©μ΄μ
μ μ§μ νλ λ°©μμ
λλ€.
`@keyframes μ΄λ¦` ννλ‘ μ
λ ₯ν©λλ€.
λν, ν€ νλ μ μμμλ νΌμΌνΈ λ¨μ(μκ° κΈ°μ€)λ‘ μ λλ©μ΄μ
μ μ μ©ν©λλ€.
fromμ μμ(0%)μ΄λ©° toλ λ(100%)λ₯Ό λνλ
λλ€.
ex) durationμ΄ 10sμΌ λ, 50%μ ν΄λΉνλ 건 5sμ
λλ€.
μ¦ 50%μ ν΄λΉνλ μ€νμΌλ‘ μ λλ©μ΄μ
λλλ° 5sκ° κ±Έλ¦°λ€λ λ»μ
λλ€.
*/
@keyframes jayden {
from {
left: 0;
transform: rotate(0deg);
}
50% {
left: 500px;
}
to {
left: 500px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box">
<h1>Rotation</h1>
</div>
</body>
</html>
μ λλ©μ΄μ μμ±μ νλ²μ λνλ΄λ©΄ λ€μκ³Ό κ°μ΄ μ μ μ μμ΅λλ€.
div {
/* π name duration function delay count direct μμλ‘ μ μ΅λλ€. */
animation: jayden 2s linear 1s infinite alternate;
}