05-애니메이션

1. 애니메이션이란?

animation이란 HTML 요소에 적용된 CSS 스타일이 다른 값으로 부드럽게 변하는 것을 말합니다. 애니메이션을 제대로 이해하기 위해 간단하게 애니메이션 기법에 대해 알아보겠습니다. 웹(Web)에서는 애니메이션을 구현하는 기술적 부분에서 크게 2가지로 구분할 수 있습니다.

frame by frame 방식
- 여러 개의 프레임을 하나로 묶어서 애니메이션을 만들어내는 기술적인 방법

CSS_5_1

keyframe 방식
- 시작점과 끝점의 애니메이션만 지정하고, 그 사이의 과정은 생략하더라도 자연스럽게 이어줌

CSS_5_2

구현의 편리함 때문에 CSS에서는 애니메이션 기법을 구현할 떄, keyframe 방식으로 애니메이션으로 구현합니다. 애니메이션을 공부할 떄, 가장 중요한 것은 키프레임(keyframe) 룰을 지정하고 사용하는 법을 배우는 것이 핵심입니다. 그 외 애니메이션 관련 속성들은 트랜지션과 이름도 일부 비슷하고, 역할도 비슷합니다.

2. 애니메이션 속성 - 1

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>애니메이션(Animation)</title>
8    <style>
9      .box {
10        width: 100px;
11        height: 100px;
12        background-color: red;
13        /* 📝 animation-name : 애니메이션을 적용할 키프레임 이름 정의 */
14        animation-name: move;
15        /* 📝 animation-duration : 애니메이션이 진행되는 시간을 정의 */
16        animation-duration: 3s;
17      }
18      /* @keyframes : 애니메이션의 움직임을 정의 */
19      /* keyframe뒤에는 고유한 이름(식별자) 지정 */
20      @keyframes move {
21        /* '키프레임 룰' 또는 '키프레임 규칙'이라 부름 */
22        /* 시작점 */
23        from {
24          margin-left: 0;
25        }
26        /* 종료지점 */
27        to {
28          margin-left: 300px;
29        }
30      }
31    </style>
32  </head>
33  <body>
34    <div class="box"></div>
35  </body>
36</html>

2.1 animation-name

animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정합니다. 예를 들어, bgchange라는 이름의 키 프레임을 지정하고 싶다면 다음과 같이 작성합니다.

1animation-name: bgchange;

2.2 animation-duration

animation-duration 속성은 애니메이션을 지속할 시간을 설정합니다. 속성값으로는 초(s)나 밀리초(ms) 단위의 시간을 넣으면 됩니다.

2.3 animation-delay

animation-delay 속성을 사용하면 애니메이션 실행을 지연할 수 있습니다. 속성값으로는 초나 밀리초 단위의 시간을 넣으면 됩니다. 예를 들어, 다음 코드를 실행하면 애니메이션을 3초 뒤에 실행합니다.

3. 애니메이션 속성 - 2

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>애니메이션(Animation)</title>
8    <style>
9      .box {
10        width: 100px;
11        height: 100px;
12        background-color: red;
13        /* 📝 animation-name : 애니메이션을 적용할 키프레임 이름 정의 */
14        animation-name: move;
15        /* 📝 animation-duration : 애니메이션이 진행되는 시간을 정의 */
16        animation-duration: 3s;
17        /* 📝 animation-fill-mode : 애니메이션 종료 후의 동작 상태를 정의 */
18        /* none, forwards, backwards, both 값 사용 */
19        /* forwards는 애니메이션 종료 시점의 상태를 유지 */
20        animation-fill-mode: forwards;
21        /* 📝 animation-iteration-count : 애니메이션의 반복 횟수 정의 */
22        /* 숫자나 infinite 값 사용 */
23        animation-iteration-count: infinite;
24        /* 📝 animation-direction : 애니메이션의 진행 방향을 지정 */
25        /* normal(기본값), reverse, alternate, alternate-reverse 값 사용 */
26        /* alternate : 순방향 -> 역방향 -> 순방향 -> 역방향 -> ..., 가장 자주 사용 */
27        /* 순방향 : 키프레임의 0% -> 100%방향으로 흘러감, normal */
28        /* 역방향 : 키프레임의 100% -> 0%방향으로 흘러감, revesre */
29        animation-direction: alternate;
30        /* 📝 animation-timing-function : 애니메이션의 진행 속도를 지정하는 속성 */
31        /* easy(기본값), linear(일정하게 동작)  */
32        animation-timing-function: linear;
33        /* 📝 animation-delay : 애니메이션의 지연 시간을 지정하는 속성 */
34        animation-delay: 2s;
35        /* 📝 animation-play-state : 애니메이션의 진행 상태를 지정하는 속성 */
36        /* paused(멈춤), running(진행, 기본값) */
37        animation-play-state: running;
38      }
39      /* 📝 @keyframes : 애니메이션의 움직임을 정의 */
40      /* keyframe뒤에는 고유한 이름(식별자) 지정 */
41      @keyframes move {
42        /* from 대신 사용 가능, 시작점 */
43        0% {
44          margin-left: 0;
45        }
46        /* 시작과 종료 사이에 오는 특정 시점들은 무조건 %로만 가능  */
47        30% {
48        }
49        50% {
50        }
51        /* to 대신 사용 가능, 종료지점 */
52        100% {
53          margin-left: 300px;
54        }
55      }
56    </style>
57  </head>
58  <body>
59    <div class="box"></div>
60  </body>
61</html>

3.1 animation-fill-mode

애니메이션이 끝나도 원래 상태로 돌아가지 않고 애니메이션이 종료된 시점의 상태를 유지하길 원할 수도 있습니다. animation-fill-mode 속성은 애니메이션이 실행되기 전과 후의 스타일을 지정합니다. 사용할 수 있는 속성값은 다음 표와 같습니다.

속성값	상태	설명
none	실행 전	시작 시점(0%, from)의 스타일을 적용하지 않고 대기합니다.
	실행 후	실행되기 전의 스타일 적용 상태로 돌아갑니다.
forwards	실행 전	시작 시점(0%, from)의 스타일을 적용하지 않고 대기합니다.
	실행 후	키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다.
backwards	실행 전	키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다.
	실행 후	실행되기 전의 스타일 적용 상태로 돌아갑니다.
both	실행 전	키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다.
	실행 후	키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다.

animation-fill-mode 속성은 대부분 애니메이션이 종료된 후에 상태 유지를 목적으로 사용하기 때문에 forwards 속성값을 가장 많이 사용합니다.

3.2 animation-iterator-count

애니메이션은 기본으로 1회 실행하고 종료됩니다. 이때 animation-iterator-count 속성을 사용하면 실행 횟수를 조절할 수 있습니다.

3.4 animation-play-state

animation-play-state 속성은 애니메이션의 재생 상태를 지정합니다. 속성값으로는 다음 키워드를 사용할 수 있습니다.

속성 값	설명
`paused`	애니메이션의 실행을 일시 정지합니다.
`running`	애니메이션을 실행합니다.

전환 효과 속성과 다르게 애니메이션 속성은 실행 도중에 일시 정지하거나 일시 정지했다가 다시 재생할 수 있습니다. 하지만 이렇게 작업하려면 순수 HTML과 CSS 코드만으로는 불가능하고 자바스크립트도 함께 사용해야 합니다.

3.5 animation-direction

animation-direction 속성은 애니메이션의 진행 방향을 지정합니다.

속성 값	설명
`normal`	애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서대로 진행합니다(to → from).
`reverse`	애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서의 역으로 진행합니다(from → to).
`alternate`	애니메이션이 1회 이상 실행될 경우 홀수 번째는 normal로, 짝수 번째는 reverse로 진행합니다.
`alternate-reverse`	애니메이션이 1회 이상 실행될 경우 홀수 번째는 reverse로, 짝수 번째는 normal로 진행합니다.

애니메이션은 키 프레임에 정의한 순서대로 진행됩니다. 그런데 키 프레임을 어떠한 이유로 건드리지 못할 때, 애니메이션의 진행 방향은 수정하고 싶다면 animation-direction 속성을 사용합니다.

예를 들어, 다음처럼 속성을 정의하면 애니메이션의 진행 방향이 from(100%)에서 to(0%), 즉 키 프레임의 역순이 됩니다.

1animation-direction: reverse;

💡 animation-timing-function 속성

이 속성은 애니메이션의 속도를 지정할 때 사용합니다. 작동 방식이 transition-timing-function 속성과 똑같아서 여기서는 자세한 설명을 생략합니다. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function을 참고해 주세요.

04-Transition(전환)06-Transform(변화)