이 랩에서는 학생들이 강력한 @keyframes 규칙과 애니메이션 기술을 마스터하여 CSS3 애니메이션의 세계에 몰입하게 됩니다. 이 과정은 동적 웹 애니메이션 생성에 대한 포괄적인 탐구를 제공하며, 키프레임 구문 이해, 애니메이션 속성 정의, JavaScript 에 의존하지 않고 고급 애니메이션 효과 구현에 중점을 둡니다.
참가자들은 백분율 기반 키프레임과 변환 (transform) 속성을 사용하여 애니메이션 단계를 정의함으로써 부드럽고 복잡한 애니메이션을 제작하는 방법을 배우게 됩니다. 실용적인 예제와 실습을 통해 학생들은 요소의 이동, 크기 조정, 색상 변경을 동적으로 수행하는 방법을 배우고, 순수한 CSS3 애니메이션 기술을 사용하여 매력적이고 인터랙티브한 웹 경험을 만들 수 있는 기술을 습득하게 됩니다.
이 단계에서는 동적 웹 애니메이션을 생성하기 위한 구성 요소인 CSS3 애니메이션 키프레임의 기본 구문을 배우게 됩니다. CSS 애니메이션을 사용하면 JavaScript 를 사용하지 않고도 요소를 한 스타일에서 다른 스타일로 부드럽게 변환할 수 있습니다.
CSS 키프레임의 기본 구문을 이해하는 것부터 시작해 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 styles.css라는 새 파일을 만듭니다.
CSS 키프레임 애니메이션은 @keyframes 규칙을 사용하여 정의되며, 이는 애니메이션 시퀀스의 서로 다른 단계에서 애니메이션의 동작을 지정합니다. 다음은 구문을 보여주는 간단한 예입니다.
@keyframes moveRight {
/* Starting state (0% or "from") */
from {
transform: translateX(0);
}
/* Ending state (100% or "to") */
to {
transform: translateX(300px);
}
}이 예에서 moveRight는 애니메이션 이름이며, 요소가 원래 위치에서 오른쪽으로 300 픽셀 이동하는 방식을 정의합니다.
더 복잡한 애니메이션을 위해 백분율 기반 키프레임을 사용할 수도 있습니다.
@keyframes colorChange {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}이 애니메이션은 백분율 값을 사용하여 애니메이션의 여러 단계를 지정하는 방법을 보여주며, 더 복잡하고 동적인 효과를 허용합니다.
키프레임 구문에 대해 기억해야 할 주요 사항:
@keyframes를 사용합니다.from/to 또는 백분율 값을 사용하여 상태를 정의합니다.간단한 애니메이션의 예시 출력:
[A div element smoothly moving from left to right]
[A div element changing colors from red to green to blue]이 단계에서는 간단한 이동 요소 애니메이션을 구축하여 @keyframes 규칙을 사용하여 기본 애니메이션을 만드는 방법을 배우게 됩니다. 이전 단계의 지식을 확장하여 더 실용적인 예제를 만들 것입니다.
먼저, 애니메이션을 시연하기 위해 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 index.html이라는 새 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic CSS Animation</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="animated-box"></div>
</body>
</html>이제 이전에 만든 styles.css 파일을 더 자세한 애니메이션으로 업데이트합니다.
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
@keyframes moveAndResize {
0% {
/* Starting state */
transform: translateX(0) scale(1);
background-color: blue;
}
50% {
/* Midpoint of animation */
transform: translateX(200px) scale(1.5);
background-color: green;
}
100% {
/* Ending state */
transform: translateX(400px) scale(1);
background-color: red;
}
}@keyframes 규칙을 자세히 살펴보겠습니다.
moveAndResize라는 애니메이션을 정의합니다.예시 출력:
[A blue box that:
- Moves from left to right
- Changes size from normal to larger and back
- Changes color from blue to green to red]이 예제는 다음을 보여줍니다.
이 단계에서는 HTML 요소에 애니메이션 속성을 적용하여 키프레임 애니메이션을 실제로 구현하는 방법을 배우게 됩니다. 이전 styles.css 파일을 수정하여 애니메이션의 동작을 제어하는 특정 애니메이션 속성을 추가할 것입니다.
다음 CSS 로 styles.css 파일을 업데이트합니다.
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
/* Animation properties */
animation-name: moveAndResize; /* Name of the keyframe animation */
animation-duration: 3s; /* Total time of one animation cycle */
animation-timing-function: ease-in-out; /* Smooth acceleration and deceleration */
animation-delay: 1s; /* Wait 1 second before starting */
}
@keyframes moveAndResize {
0% {
transform: translateX(0) scale(1);
background-color: blue;
}
50% {
transform: translateX(200px) scale(1.5);
background-color: green;
}
100% {
transform: translateX(400px) scale(1);
background-color: red;
}
}주요 애니메이션 속성 설명:
animation-name: 요소를 특정 @keyframes 규칙에 연결합니다.animation-duration: 하나의 완전한 애니메이션 사이클에 대한 총 시간을 설정합니다.animation-timing-function: 애니메이션의 속도 곡선을 제어합니다.animation-delay: 애니메이션이 시작되기 전 대기 기간을 지정합니다.다음과 같이 단축 속성 animation을 사용하여 이러한 속성을 결합할 수도 있습니다.
.animated-box {
animation: moveAndResize 3s ease-in-out 1s;
}예시 출력:
[A blue box that:
- Waits 1 second before starting
- Moves smoothly from left to right
- Changes size and color gradually
- Takes 3 seconds to complete one animation cycle]이 단계에서는 타이밍, 반복 및 방향을 제어하여 CSS 애니메이션을 미세 조정하는 방법을 배우게 됩니다. 고급 애니메이션 사용자 정의를 시연하기 위해 이전 예제를 확장할 것입니다.
다음 CSS 로 styles.css 파일을 업데이트합니다.
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
/* Customize animation properties */
animation-name: moveAndResize;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.5, 0.1, 0.3, 1);
animation-iteration-count: 3; /* Repeat animation 3 times */
animation-direction: alternate; /* Reverse direction on each iteration */
animation-fill-mode: forwards; /* Keep final state after animation */
}
@keyframes moveAndResize {
0% {
transform: translateX(0) scale(1);
background-color: blue;
}
100% {
transform: translateX(400px) scale(1.5);
background-color: red;
}
}주요 애니메이션 사용자 정의 속성:
animation-timing-function: 속도 곡선을 제어합니다 (예: 사용자 정의 가속을 위한 cubic-bezier())animation-iteration-count: 애니메이션이 반복되는 횟수를 정의합니다.animation-direction: 애니메이션 재생 방향을 결정합니다.animation-fill-mode: 애니메이션 전/후에 스타일이 적용되는 방식을 지정합니다.단축 속성 animation을 사용할 수도 있습니다.
.animated-box {
animation: moveAndResize 3s cubic-bezier(0.5, 0.1, 0.3, 1) 3 alternate forwards;
}예시 출력:
[A blue box that:
- Moves and resizes 3 times
- Changes direction with each iteration
- Uses a custom speed curve
- Remains at the final position after animation]이 단계에서는 CSS 키프레임과 변환의 강력함을 보여주는 다중 요소, 복잡한 애니메이션을 생성하여 고급 CSS 애니메이션 기술을 탐구합니다.
여러 개의 애니메이션 요소를 포함하도록 index.html 파일을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced CSS Animations</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
</div>
</body>
</html>styles.css의 내용을 다음 고급 애니메이션으로 바꿉니다.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
opacity: 0.7;
}
.circle1 {
background-color: #ff6b6b;
animation: orbit1 4s infinite linear;
}
.circle2 {
background-color: #4ecdc4;
animation: orbit2 4s infinite linear;
}
.circle3 {
background-color: #45b7d1;
animation: orbit3 4s infinite linear;
}
@keyframes orbit1 {
0% {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
@keyframes orbit2 {
0% {
transform: rotate(120deg) translateX(200px) rotate(-120deg);
}
100% {
transform: rotate(480deg) translateX(200px) rotate(-480deg);
}
}
@keyframes orbit3 {
0% {
transform: rotate(240deg) translateX(250px) rotate(-240deg);
}
100% {
transform: rotate(600deg) translateX(250px) rotate(-600deg);
}
}시연된 주요 고급 애니메이션 기술:
예시 출력:
[Three colored circles orbiting around a central point
- Circles move at different distances
- Continuous, smooth rotation
- Overlapping, translucent effect]이 랩에서 참가자들은 JavaScript 를 사용하지 않고 동적인 웹 애니메이션을 만드는 방법을 배우면서 CSS3 애니메이션 키프레임의 기본 사항을 탐구했습니다. 이 랩은 @keyframes 규칙 구문을 이해하는 데 중점을 두었으며, 이를 통해 개발자는 백분율 기반 또는 from/to 상태를 사용하여 복잡한 애니메이션 시퀀스를 정의할 수 있습니다. 참가자들은 애니메이션 시퀀스의 다른 단계에서 위치, 색상 및 크기와 같은 CSS 속성을 변환하여 애니메이션 동작을 지정하는 방법을 배웠습니다.
실습을 통해 학습자는 화면에서 요소를 이동하고, 색상을 변경하고, 애니메이션 타이밍 및 반복을 사용자 정의하는 등 기본 및 고급 애니메이션 효과를 만드는 방법을 익혔습니다. 다양한 키프레임 구성을 실험함으로써 참가자들은 사용자 인터페이스 상호 작용 및 시각적 매력을 향상시키는 부드럽고 매력적인 웹 애니메이션을 제작하는 실질적인 경험을 얻었습니다.
