5.1 색상 변경
CSS-transitions는 요소 속성의 변화를 애니메이션화하여 부드러운 시각적 효과를 만들어줘. 이번에는 색상, 크기 및 위치 변경에 전환을 어떻게 사용하는지 살펴보고 실질적인 예제를 보여줄 거야.
CSS-transitions을 사용한 요소의 색상 변경은 가장 흔한 사용 사례 중 하나야. 여기에는 텍스트, 배경 또는 요소의 테두리 색상 변경이 포함될 수 있어.
예제 1: 배경 색상 변경
이 예제는 마우스를 올렸을 때 요소의 배경 색상이 변경되는 것을 보여줘:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경 색상 변경</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 고정 크기와 배경 색상을 가진 요소.box:hover: 마우스를 올리면 배경 색상이 부드럽게 파란색에서 녹색으로 1초 동안ease타이밍 함수와 함께 변해
예제 2: 텍스트 색상 변경
이 예제는 마우스를 올렸을 때 요소의 텍스트 색상이 변경되는 것을 보여줘:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 색상 변경</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Hover over me!</div>
</body>
</html>
코드 설명:
.text: 초기 텍스트 색상을 가진 요소.text:hover: 마우스를 올리면 텍스트 색상이 부드럽게 빨간색에서 보라색으로 0.5초 동안linear타이밍 함수와 함께 변해
5.2 크기 변경
CSS-transitions을 사용한 요소의 크기 변경은 너비, 높이 또는 두 크기를 동시에 변경할 수 있어.
예제 1: 너비 변경
이 예제는 마우스를 올렸을 때 요소의 너비가 변경되는 것을 보여줘:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>너비 변경</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 초기 너비가 100 픽셀인 요소-
.box:hover: 마우스를 올리면 요소의 너비가 부드럽게 200 픽셀로 2초 동안ease-in-out타이밍 함수와 함께 증가해
예제 2: 높이 변경
이 예제는 마우스를 올렸을 때 요소의 높이가 변경되는 것을 보여줘:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>높이 변경</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
코드 설명:
.box: 초기 높이가 100 픽셀인 요소.box:hover: 마우스를 올리면 요소의 높이가 부드럽게 200 픽셀로 1.5초 동안ease타이밍 함수와 함께 증가해
5.3 위치 변경
CSS-transitions을 사용한 요소의 위치 변경은 top, right, bottom, left 속성이나 translate 변환을 사용한 요소의 이동이 포함될 수 있어.
예제 1: left 사용하여 이동
이 예제는 left 속성을 사용하여 마우스를 올렸을 때 요소가 오른쪽으로 이동하는 것을 보여줘:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소 이동</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 초기 위치 값이left: 0인 요소.box:hover: 마우스를 올리면 요소가 부드럽게 오른쪽으로 100 픽셀 이동해 2초 동안
예제 2: transform: translate 사용하여 이동
이 예제는 translate 변환을 사용하여 마우스를 올렸을 때 요소가 오른쪽으로, 아래로 이동하는 것을 보여줘:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform: translate 사용하여 이동</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
코드 설명:
.box: 초기 변환 값이translate(0, 0)인 요소.box:hover: 마우스를 올리면 요소가 부드럽게 오른쪽으로 100 픽셀, 아래로 50 픽셀 이동해 1초 동안
GO TO FULL VERSION