π»Transition, μ νπ»
- κ°μ²΄μ μμ±(μν)κ°μ΄ λ³νλλ κ³Όμ μ μκ° μμλλ‘ λ³΄μ¬μ£Όλ μμ±
- μμΉν μμ±μλ§ μ μ© κ°λ₯νλ€.(μ«μ λλ μμ)
- μ£Όλ‘ λ§μ°μ€ νΈλ² λ±κ³Ό κ°μ μ΄λ²€νΈμ λ°μνμ¬ μμμ μ€νμΌμ λΆλλ½κ² μ νν λ μ¬μ©λλ€.
1. μμ± (property)
- μ΄λ€ CSS μμ±μ λν μ νμ μ μ©ν κ²μΈμ§λ₯Ό μ§μ νλ€.
- μλ₯Ό λ€μ΄ color, background-color, width λ±μ μ§μ ν μ μλ€.
2. μ§μ μκ° (duration)
- μ νμ μ§μ μκ°μ μ§μ νλ€.
- μ΄(s)λ λ°λ¦¬μ΄(ms) λ¨μλ‘ μ€μ ν μ μλ€.
3. νμ΄λ° ν¨μ (timing-function)
- μ νμ μ§ν κ³Όμ μ μ‘°μ νλ ν¨μλ₯Ό μ§μ νλ€.
- ease, linear, ease-in, ease-out, ease-in-out λ±μ΄ μμ΅λλ€.
4. μ§μ° μκ° (delay)
- μ ν μμμ μ§μ°μν¬ μ μλ μ΅μ
λ§μ°μ€κ° body μλ‘ μ¬λΌκ°μ λ, μμμ μ λλ©μ΄μ μ μ©νκΈ°
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex46.css">
</head>
<body>
<div id="box">μμ</div>
</body>
</html>body {
padding-bottom: 500px;
}
#box {
border: 10px solid black;
width: 200px;
height: 200px;
background-color: gold;
margin: 100px;
transition-property: width, height, background-color;
transition-duration: 3s;
}
body:hover #box {
width: 600px;
height: 600px;
background-color: tomato;
}
delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex47.css">
</head>
<body>
<div id="list">
<div id="box1" class="box">linear</div>
<div id="box2" class="box">ease(default)</div>
<div id="box3" class="box">ease-in</div>
<div id="box4" class="box">ease-out</div>
<div id="box5" class="box">ease-in-out</div>
<div/>
</body>
</html>
#list {
border: 1px solid black;
width: 1200px;
}
#list .box {
width: 100px;
height: 50px;
margin: 15px 0;
transition-property: margin-left;
transition-duration: 5s;
}
#box1 {
background-color: tomato;
transition-delay: 0s;
}
#box2 {
background-color: orange;
transition-delay: 1s;
}
#box3 {
background-color: gold;
transition-delay: 1.5s;
}
#box4 {
background-color: yellowgreen;
transition-delay: 2s;
}
#box5 {
background-color: cornflowerblue;
transition-delay: 2.5s;
}
#list:hover .box {
margin-left: 1100px;
}
transition-timing-function
#list {
border: 1px solid black;
width: 1200px;
}
#list .box {
width: 100px;
height: 50px;
margin: 15px 0;
transition-property: margin-left;
transition-duration: 5s;
}
#box1 {
background-color: tomato;
transition-timing-function: linear;
}
#box2 {
background-color: orange;
transition-timing-function: ease;
}
#box3 {
background-color: gold;
transition-timing-function: ease-in;
}
#box4 {
background-color: yellowgreen;
transition-timing-function: ease-out;
}
#box5 {
background-color: cornflowerblue;
transition-timing-function: ease-in-out;
}
'WEB > CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [CSS] μμ λ°°μΉ : flex box (0) | 2023.10.04 |
|---|---|
| [CSS] μ λλ©μ΄μ ν¨κ³Ό : animation (0) | 2023.10.04 |
| <div>, <nav> μ°¨μ΄μ (0) | 2023.09.27 |
| [CSS] Transform, λ³ν (0) | 2023.09.27 |
| [CSS]νμ΄μ§ ν¬κΈ° μ‘°μ μ, μμλ€μ΄ μλ κ°ν λ λ (0) | 2023.09.27 |
