Post

CSS) animation(@keyframes)에 대해 알아보자

Posted Updated
Preview Image
By parksohyunnn 7 min read

안녕하세요, 웹 개발을 사랑하는 여러분! 오늘은 CSS의 강력한 기능 중 하나인 애니메이션(animation)에 대해 자세히 알아보겠습니다. 이 글을 통해 CSS 애니메이션의 정의, 사용 방법, 기본 속성, 종류, 그리고 실제 사용 사례 등을 다루겠습니다. 끝까지 함께 해주세요!

CSS 애니메이션 정의

CSS 애니메이션은 웹 페이지의 요소에 애니메이션 효과를 추가할 수 있는 기능입니다. 이를 통해 웹 페이지를 더욱 생동감 있고 인터랙티브하게 만들 수 있습니다. CSS 애니메이션은 @keyframes 규칙과 애니메이션 속성을 사용하여 애니메이션 시퀀스를 정의합니다.

CSS 애니메이션 사용 방법

1. @keyframes 규칙 정의

@keyframes 규칙은 애니메이션의 단계와 각 단계에서의 스타일을 정의합니다.

1
2
3
4
5
6
7
8

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

2. 애니메이션 속성 적용

정의된 @keyframes를 요소에 적용하려면, animation 속성을 사용합니다.

1
2
3

.element {
  animation: slidein 2s ease-in-out;
}

주요 속성

  • nimation-name: 사용할 @keyframes의 이름을 지정합니다.
  • nimation-duration: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.
  • nimation-timing-function: 애니메이션의 속도 곡선을 지정합니다.
  • nimation-delay: 애니메이션이 시작되기 전의 지연 시간을 지정합니다.
  • nimation-iteration-count: 애니메이션이 반복되는 횟수를 지정합니다.
  • nimation-direction: 애니메이션의 재생 방향을 지정합니다.

CSS 애니메이션의 기본값

다음은 CSS 애니메이션 속성의 기본값입니다:

1
2
3
4
5
6
7
8
9
10

.element {
  animation-name: none;
  animation-duration: 0s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

CSS 애니메이션의 종류

    1. animation-name 애니메이션의 이름을 지정합니다. 이는 @keyframes 규칙의 이름과 일치해야 합니다.
    1. animation-duration 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.
    1. animation-timing-function 애니메이션의 속도 곡선을 정의합니다. 주요 값으로는 ease, linear, ease-in, ease-out, ease-in-out 등이 있습니다.
    1. animation-delay 애니메이션이 시작되기 전의 지연 시간을 지정합니다.
    1. animation-iteration-count 애니메이션이 반복되는 횟수를 지정합니다. 값으로 infinite를 사용하면 무한 반복됩니다.
    1. animation-direction 애니메이션의 재생 방향을 지정합니다. 주요 값으로는 normal, reverse, alternate, alternate-reverse 등이 있습니다.
    1. animation-fill-mode 애니메이션이 끝난 후 또는 지연 기간 동안의 스타일을 정의합니다. 주요 값으로는 none, forwards, backwards, both가 있습니다.
    1. animation-play-state 애니메이션의 재생 상태를 제어합니다. 주요 값으로는 running과 paused가 있습니다.

CSS 애니메이션의 장점

  • 퍼포먼스 향상: CSS 애니메이션은 하드웨어 가속을 이용하여 성능이 뛰어납니다.
  • 간편한 사용: 복잡한 자바스크립트 없이 간단한 코드로 애니메이션을 구현할 수 있습니다.
  • 재사용성: 한 번 정의된 애니메이션은 여러 요소에 쉽게 적용할 수 있습니다.

CSS 애니메이션의 단점

  • 제한된 제어: 자바스크립트에 비해 복잡한 애니메이션 제어가 어렵습니다.
  • 브라우저 호환성: 일부 구형 브라우저에서는 CSS 애니메이션을 지원하지 않을 수 있습니다.

실제 사용 사례

예제 1: 간단한 슬라이드 애니메이션

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slide Animation</title>
  <style>
    @keyframes slidein {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(0);
      }
    }

    .slide {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: slidein 2s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="slide"></div>
</body>
</html>
  • 예제 2: 반복적인 회전 애니메이션
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotate Animation</title>
  <style>
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .rotate {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: rotate 3s linear infinite;
    }
  </style>
</head>
<body>
  <div class="rotate"></div>
</body>
</html>

마무리

오늘은 CSS 애니메이션에 대해 깊이 있게 알아보았습니다. CSS 애니메이션은 웹 페이지를 더욱 생동감 있고 인터랙티브하게 만들 수 있는 강력한 도구입니다. 이 포스팅이 여러분의 웹 개발 여정에 도움이 되었기를 바랍니다. 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊

다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!

CSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github