6.1 @keyframes 규칙
CSS 애니메이션은 최소한의 노력으로 복잡하고 부드러운 시각적 효과를 만들어 낼 수 있어. CSS에서 애니메이션을 만드는 주요 도구는 @keyframes 규칙인데, 이는 애니메이션의 키 프레임과 각 프레임에서 일어날 스타일 변화를 정의해.
@keyframes 규칙은 애니메이션을 만들기 위해 사용되고, 애니메이션이 진행되는 다양한 단계에서 CSS 속성의 변화를 정의하는 거야. 키 프레임은 애니메이션 과정의 특정 시간에 어떤 스타일이 적용될지를 결정해.
문법 1:
@keyframes animation-name {
from {
/* 시작 스타일 */
}
to {
/* 끝나는 스타일 */
}
}
문법 2:
@keyframes animation-name {
0% {
/* 시작 스타일 */
}
100% {
/* 끝나는 스타일 */
}
}
어디서:
from은 애니메이션 시간의0%에 해당돼to는 애니메이션 시간의100%에 해당돼
예제: 배경색 부드러운 변화
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
설명:
@keyframes changeColor규칙은 요소의 배경색을lightblue에서lightcoral로 변경하는 애니메이션을 정의해.animated-box요소의animation속성은changeColor애니메이션이 3초 동안 지속되고 무한히 반복돼야 함을 나타내
6.2 여러 키프레임
중간 상태의 스타일을 정의하여 더 복잡한 애니메이션을 만들기 위해 두 개 이상의 키프레임을 사용할 수 있어.
예제: 대각선으로 이동하며 색상 변경
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
설명:
@keyframes moveAndChangeColor 규칙은 요소의 배경색과 위치를 세 단계에서 변화시키는 애니메이션을 정의해.
- 애니메이션 시간의 0%에서 요소는 연한 파란색이며 시작 위치에 있어
- 애니메이션 시간의 50%에서 요소는 연한 초록색이며 오른쪽과 아래로 100 픽셀 이동해
- 애니메이션 시간의 100%에서 요소는 연한 코랄색이며 오른쪽으로 200 픽셀 이동해
6.3 간단한 애니메이션 예제
예제 1: 펄싱
요소가 부드럽게 커졌다가 작아지는 펄싱 효과 만들기.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
설명:
@keyframes pulse규칙은 요소를 120%까지 확대하고 원래 크기로 돌아가는 애니메이션을 정의해.pulse-box요소의animation속성은pulse애니메이션이 2초 동안 지속되고 무한히 반복돼야 함을 나타내
예제 2: 회전
요소의 연속적인 회전 효과 만들기:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
설명:
@keyframes rotate규칙은 요소를 0부터 360도까지 회전시키는 애니메이션을 정의해-
.rotate-box요소의animation속성은rotate애니메이션이 3초 동안 지속되고 무한히 반복되며 일정한 속도(linear)로 발생해야 함을 나타내
GO TO FULL VERSION