애니메이션 관련 CSS 속성
이 글은 애니메이션 관련 CSS 속성을 설명합니다.
@keyframes, animation, transition 속성의 사용법과 문법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-animation.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Animation Related Properties</h2>
20 </header>
21 <article>
22 <h3>@keyframes</h3>
23 <section>
24 <h4>Animation Examples</h4>
25 <header><h4>animation: slide 3s ease infinite</h4></header>
26 <section class="sample-view">
27 <div class="box-animation-slide">Slide Box</div>
28 </section>
29 <header><h4>animation: color-change 3s ease infinite</h4></header>
30 <section class="sample-view">
31 <div class="box-animation-color-change">Color Change Box</div>
32 </section>
33 <header><h4>animation: fade 3s ease infinite</h4></header>
34 <section class="sample-view">
35 <div class="box-animation-fade">Fade Box</div>
36 </section>
37 </section>
38 </article>
39 <article>
40 <h3>animation</h3>
41 <section>
42 <h4>Animation Examples</h4>
43 <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44 <section class="sample-view">
45 <div class="box-animation-ease-in-out">Slide Box</div>
46 </section>
47 <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48 <section class="sample-view">
49 <div class="box-animation-alternate">Color Change Box</div>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>transition</h3>
55 <section>
56 <h4>Transition Examples</h4>
57 <header><h4>transition: background-color 2s ease</h4></header>
58 <section class="sample-view">
59 <div class="transition-box">Hover me!</div>
60 </section>
61 <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62 <section class="sample-view">
63 <div class="transition-2-properties">Hover me!</div>
64 </section>
65 </section>
66 </article>
67 </main>
68</body>
69</html>애니메이션 및 트랜지션
@keyframes 규칙
1/* Animation definition */
2@keyframes slide {
3 0% {
4 transform: translateX(0);
5 }
6 50% {
7 transform: translateX(200px);
8 }
9 100% {
10 transform: translateX(0);
11 }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16 width: 100px;
17 height: 100px;
18 background-color: skyblue;
19 animation: slide 3s ease infinite;
20}@keyframes는 애니메이션 동안 스타일이 어떻게 변경되는지를 지정하는 데 사용됩니다. @keyframes에서 애니메이션의 시작부터 끝까지의 스타일 변경은 시간 백분율 또는 키워드 (from 및 to)로 지정됩니다.
- 이것은 요소가 왼쪽에서 오른쪽으로 슬라이드하고 원래 위치로 돌아가는 애니메이션 예제입니다.
- 이 예제에서는
@keyframes뒤에slide를 작성하여slide라는 애니메이션을 정의합니다. 0%는 애니메이션의 시작점이며,translateX(0)을 사용해 요소를 원래 위치에 배치합니다.50%는 애니메이션 중간 지점으로, 요소가translateX(200px)을 사용하여 오른쪽으로 200px 이동합니다.100%는 애니메이션의 끝점이며, 요소가 원래 위치로 돌아갑니다.box-animation-slide클래스에서animation속성을 사용하여 3초 간격으로slide애니메이션을 적용합니다.
1@keyframes color-change {
2 0% {
3 background-color: red;
4 }
5 25% {
6 background-color: blue;
7 }
8 50% {
9 background-color: green;
10 }
11 75% {
12 background-color: yellow;
13 }
14 100% {
15 background-color: red;
16 }
17}
18
19.box-animation-color-change {
20 width: 100px;
21 height: 100px;
22 background-color: skyblue;
23 animation: color-change 3s ease infinite;
24}- 애니메이션 동안 스타일을 세밀하게 제어할 수 있습니다. 백분율을 지정하여 임의의 시점에 다른 스타일을 적용할 수 있습니다.
- 이 예제에서는 색상이 빨간색에서 파란색, 초록색, 노란색으로 점진적으로 변화한 후 다시 빨간색으로 돌아갑니다.
1@keyframes fade {
2 from {
3 opacity: 0;
4 }
5 to {
6 opacity: 1;
7 }
8}
9
10.box-animation-fade {
11 width: 100px;
12 height: 100px;
13 background-color: blue;
14 animation: fade 3s ease infinite;
15}- 이 예제에서는
from이0%와 같고,to가100%와 같습니다. 이것을 통해 간단한 애니메이션을 정의할 수 있습니다.
기본 구문
1@keyframes animation-name {
2 0% {
3 /* Style at the start */
4 }
5 50% {
6 /* Style at the midpoint */
7 }
8 100% {
9 /* Style at the end */
10 }
11}animation-name: 애니메이션의 이름.animation속성이나animation-name속성을 사용하여 지정합니다.- 백분율 또는 키워드:
0%에서100%까지의 백분율 또는 키워드from(0%와 동일) 및to(100%와 동일)를 사용합니다.
animation 속성
1.box-animation-ease-in-out {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: slide 3s ease-in-out infinite;
6}animation 속성은 요소에 애니메이션을 적용하는 데 사용됩니다. 애니메이션은 CSS 스타일 세트가 시간이 지남에 따라 어떻게 변화하는지를 정의합니다. animation 속성을 사용하면 애니메이션의 타이밍, 동작, 지연, 반복 횟수 등을 제어할 수 있습니다.
box-animation-ease-in-out클래스는slide를animation-name으로 지정하며,@keyframes에서 정의된slide애니메이션을 사용합니다.3s는animation-duration이며, 각 애니메이션 사이클이 3초 안에 완료됨을 의미합니다.ease-in-out는animation-timing-function이며, 애니메이션이 천천히 시작해서 가속한 뒤 끝에서 다시 느려지도록 만듭니다.infinite는animation-iteration-count이며, 애니메이션이 무한히 반복됨을 의미합니다.
1.box-animation-alternate {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: color-change 3s ease-in-out 1s 3 alternate;
6}box-animation-alternate클래스는color-change를animation-name으로 지정하며,@keyframes에서 정의된color-change애니메이션을 사용합니다.ease-in-out뒤의1s는animation-delay로, 애니메이션이 시작되기 전에 지연 시간을 지정합니다. 애니메이션은 1초 후에 시작됩니다.1s뒤의3은animation-iteration-count로, 애니메이션이 3번 반복됨을 의미합니다.alternate는animation-direction으로, 애니메이션 재생 방향을 지정합니다.alternate는 애니메이션이 번갈아 재생되도록 지정합니다.
animation 속성의 구성
animation 속성은 여러 서브 속성을 하나로 결합한 축약 속성입니다. 다음은 주요 서브 속성들입니다:.
animation-name속성: 적용할 애니메이션의 이름을 지정합니다.@keyframes에서 정의된 애니메이션 이름과 일치해야 합니다.animation-duration속성: 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다. 시간 단위는 초(s) 또는 밀리초(ms)입니다.animation-timing-function속성: 애니메이션의 속도 곡선을 지정합니다.ease,linear,ease-in,ease-out,ease-in-out등의 값이 사용됩니다.ease를 지정하면 애니메이션이 천천히 시작하여 속도가 빨라지고 마지막에 다시 느려집니다.linear를 지정하면 애니메이션이 시작부터 끝까지 일정한 속도로 진행됩니다.ease-in을 지정하면 애니메이션이 천천히 시작되고 빠르게 끝납니다.ease-out을 지정하면 애니메이션이 빠르게 시작되고 천천히 끝납니다.ease-in-out을 지정하면 천천히 시작하여 빠르게 진행되고 천천히 끝납니다.
animation-delay속성은 애니메이션이 시작되기 전의 지연 시간을 지정합니다. 시간 단위는 초 또는 밀리초입니다.animation-iteration-count속성은 애니메이션이 반복될 횟수를 지정합니다.infinite를 지정하면 애니메이션이 무한히 반복됩니다.animation-direction속성은 애니메이션 재생 방향을 지정합니다. 옵션에는normal(정방향),reverse(역방향),alternate(번갈아 재생),alternate-reverse(역방향으로 번갈아 재생)가 포함됩니다.animation-fill-mode속성은 애니메이션 시작 전과 종료 후의 상태를 지정합니다.none,forwards,backwards,both중 하나를 지정할 수 있습니다.animation-play-state속성은 애니메이션이 실행 중인지 일시 중지 상태인지를 지정합니다.running또는paused를 지정할 수 있습니다.
요약
animation 속성은 요소의 스타일을 동적으로 변경할 수 있는 강력한 도구입니다. @keyframes를 사용하여 스타일이 시간에 따라 어떻게 변화하는지 정의하고, 각 animation 하위 속성을 통해 애니메이션의 세부 동작을 제어할 수 있습니다.
transition 속성
1.transition-box {
2 background-color: lightgray;
3 transition: background-color 2s ease;
4}
5
6.transition-box:hover {
7 background-color: steelblue;
8}
9
10.transition-2-properties {
11 background-color: lightgray;
12 width: 150px;
13 height: 50px;
14 transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18 background-color: blue;
19 width: 250px;
20}transition 속성은 CSS 스타일 변경에 애니메이션 효과를 적용하는 데 사용됩니다. 이는 hover, focus, active와 같은 상태 변경이나 JavaScript에 의해 스타일이 동적으로 변경될 때 변화가 부드럽게 나타나도록 합니다.
transition-box 클래스의 예제를 살펴보겠습니다. 버튼 위에 마우스를 올리면 배경색이 부드럽게 변경됩니다.
- transition-box 클래스에서 transition 속성은 배경색 변경에 2초의 전환 효과를 적용합니다. 이 변경은 ease로 지정되어 부드럽게 이루어집니다.
- hover 의사 클래스는 마우스가 버튼 위에 있을 때 배경색을 lightgray에서 steelblue로 변경합니다. 이 변경은 transition-box 클래스에서 지정된 2초 동안 부드럽게 이루어집니다.
transition은 여러 속성에 동시에 적용할 수 있습니다.
- transition-2-properties 클래스 예제에서는 배경색이 5초 동안, 너비가 0.5초 동안 변경됩니다.
기본 구문
1/* Basic syntax of transition */
2transition: property duration timing-function delay;property는 애니메이션이 적용될 CSS 속성을 지정합니다.all을 지정하면 모든 속성에 애니메이션이 적용됩니다.duration은 애니메이션이 완료되는 데 걸리는 시간을 지정합니다. 초(s) 또는 밀리초(ms)를 사용하여 지정하세요.timing-function은 애니메이션의 속도 변화를 지정합니다.ease,linear,ease-in,ease-out,ease-in-out등과 같은 옵션을 사용할 수 있습니다.delay는 애니메이션이 시작되기 전의 지연 시간을 지정합니다. 초 또는 밀리초로 지정하세요.
transition의 세부 속성
1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;transition은 다음과 같이 개별 속성으로도 사용할 수 있습니다.
transition-property: 애니메이션이 적용될 속성을 지정합니다.transition-duration: 애니메이션이 완료되기까지의 시간을 지정합니다.transition-timing-function: 애니메이션의 진행 속도를 지정합니다.ease,linear,ease-in,ease-out,ease-in-out등과 같은 옵션을 사용할 수 있습니다.transition-delay: 애니메이션이 시작되기 전의 지연 시간을 지정합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.