μ ν μμ±
μ€νμΌ μμ±μ λ³κ²½ μ λ³κ²½κ°μΌλ‘ μ νλλ μ€νμΌμ μ§μ νλ μμ±
β’
λ³ν μμ± μ’
λ₯
β’
κΈ°λ³Έ μμ μ½λ
β’
νμ΄λ° μλ μμ± μ¬μ΄νΈ
λ³ν μμ± μ’ λ₯
μμ± | μ€λͺ
| κΈ°λ³Έ μμ μ½λ |
transition | νΉμ μμ±μ λ³κ²½μ λν΄ μ λλ©μ΄μ
ν¨κ³Όλ₯Ό μ μ©ν©λλ€. | transition: property duration timing-function delay; |
β’
μμ± (property): μ λλ©μ΄μ
μ μ μ©ν CSS μμ±μ
λλ€.
β’
μ§μ μκ° (duration): μ λλ©μ΄μ
μ μ§μ μκ°μ
λλ€. (μ: 0.5s, 300ms)
β’
νμ΄λ° ν¨μ (timing-function): μ λλ©μ΄μ
μ μλ λ³ν 곑μ μ
λλ€. (μ: linear, ease-in, ease-out, ease-in-out)
β’
μ§μ° μκ° (delay): μ λλ©μ΄μ
μ΄ μμλκΈ° μ μ μ§μ°λλ μκ°μ
λλ€. (μ: 0s, 200ms)
κΈ°λ³Έ μμ μ½λ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>μ ν μμ± μμ</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f0f0;
}
/* κΈ°λ³Έ λ²νΌ μ€νμΌ */
.transition-example {
width: 150px;
height: 50px;
background-color: lightcoral;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease; /* μ ν μμ± μ μ© */
}
/* λ²νΌ νΈλ² μ μ€νμΌ λ³κ²½ */
.transition-example:hover {
background-color: lightcoral;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="transition-example">Hover Me</button>
</body>
</html>
HTML
볡μ¬