프로그래밍/css 심화

CSS 심화 공부(3) - 동적 변화(animation)

lamarcK 2025. 3. 11. 20:18

animation이란?

animation은 간단하게 말하면 움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 기술이라고 할 수 있다. 흔히 영상물에서 보이는 애니메이션은 1장, 1장의 이미지를 계속 보여줘서 그림이 움직이는 것처럼 착시를 불러일으키는 것이다.

24프레임, 30프레임 하는 것은 저렇게 1장, 1장 보여주는 이미지를 1초에 몇 장을 보여주냐를 칭하는 개념이다. 즉 1초에 24장의 이미지를 보여주면 24 프레임이고 30장의 이미지를 보여주면 30 프레임이다.

 

CSS에서 말하는 animation도 이와 비슷하다. 웹 페이지 요소에 스타일 변화를 연속적으로 적용하여 마치 애니메이션처럼 움직이는 듯한 착시 현상을 불러 일으키는 것이다.

시시포스 테이블 (Sisyphus Table) 이라는 가구가 있다.

테이블 표면에 모래를 깔고, 그 위를 쇠구슬이 움직이며 다양한 패턴을 만들어내는 키네틱 아트 테이블인데 브루스 샤피로(Bruce Shapiro)라는 예술가가 개발했다.

 

CSS 애니메이션은 이처럼 시간의 흐름에 따라 변화하고, 반복적인 움직임을 보이며, 움직임을 제어받는다는 점에서 시시포스 테이블의 작동 방식과 비슷하다고 할 수 있다.

 

그렇다면 CSS에서 애니메이션 속성을 적용하려면 어떻게 해야할까?

먼저 @keyframes:라는 규칙을 먼저 지정해야한다. frames(프레임)이라는 단어에서 짐작할 수 있듯이 애니메이션의 각 단계를 정의하는 방식이라고 볼 수 있다.

@keyframes:

  • 애니메이션의 각 단계를 정의하는 규칙이다
  • from (시작 상태)부터 to (종료 상태)까지 또는 백분율(%)을 사용하여 중간 단계를 지정할 수 있다.
  • 각 단계에서 요소의 스타일(예: 위치, 크기, 색상)을 변경한다.

@keyframes의 각 부분은 다음과 같이 구성되어 있다.

 

앞서 말했듯이 css의 애니메이션은 스타일 변화를 연속적으로 적용하여 요소가 움직이는 것 처럼 보이도록 만드는 것이다. 때문에 우리가 이런 스타일의 변화를 처음부터 끝까지 본다면 0%~100%까지의 변화를 모두 본 것이라고 할 수 있다.

그렇다면 50%~100%까지의 변화를 본다면 어떨까? 그 경우에 우리는 0~50%에서 일어나는 스타일 변화를 생략하고 50~100%까지의 스타일 변화만 보게 되는 것이다.

 

때문에 css의 애니메이션 효과는 실제 영상물의 애니메이션과 다르게 각 프레임마다 할당된 그림을 보는 것이 아닌 '변화'를 보는 것이라고 할 수 있다.

 

영상물의 애니메이션은 50% 지점에서 100% 지점을 보든, 0%에서 100%까지의 지점을 보든 50% 지점의 그림은 동일하다. 하지만 CSS의 애니메이션은 50%에서 100% 지점을 보게 될 경우 0~50%의 변화가 생략되어 동일 시간 동안에 50%~100%의 변화를 보여주게 되어 변화가 갑작스럽게 일어난 것으로 보인다.

 

아래 예시와 함께 보자.

@keyframes ani1 {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  50% {
    background-color: yellow;
    transform: translateX(100px);
  }
  100% {
    background-color: blue;
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  animation-name: ani1;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
<body>
  <div class="box">
  </div>
  </body>

여기서 transform: translateX()는 X축의 위치를 이동시키는 것으로 left와 시각적인 효과는 동일하다고 볼 수 있지만 left 속성은 position 속성이 relative, absolute, fixed, 또는 sticky로 설정된 요소에만 적용된다.

 

아무런 변화가 없는 원본의 경우 이런식으로 박스의 움직임을 볼 수 있다.

 

하지만 시작 지점을 각각 30%, 70%로 수정한다면 좀 더 갑작스럽게 변화를 하게 된다.

@keyframes ani1 {
  30% {
    background-color: red;
    transform: translateX(0);
  }
  70% {
    background-color: yellow;
    transform: translateX(100px);
  }
  100% {
    background-color: blue;
    transform: translateX(0);
  }
}

두 이미지를 비교하면 오른쪽의 이미지가 좀 더 빠르게 변화를 일으키는 것을 알 수 있다.

다른 속성들과 마찬가지로 animation 또한 다양한 속성이 있다.

더보기

주요 animation 하위 속성:

  • animation-name: @keyframes 규칙의 이름을 지정합니다.
  • animation-duration: 애니메이션이 한 번 재생되는 시간을 설정합니다. (예: 2s, 0.5s)
  • animation-timing-function: 애니메이션의 속도 변화를 정의합니다. (예: ease, linear, ease-in-out)
  • animation-delay: 애니메이션 시작 전 대기 시간을 설정합니다. 2s로 지정한다면 2초 뒤에 애니메이션이 시작된다.
  • animation-iteration-count: 애니메이션 반복 횟수를 지정합니다. infinite로 무한 반복 가능하며 n번으로 지정하게 되면 n번 만큼 반복하고 멈추게 된다.
  • animation-direction: 애니메이션 재생 방향을 설정합니다. (예: normal, reverse, alternate) 애니메이션의 재생 방향을 정방향, 역방향 등으로 설정하는 것이다. 역방향으로 재생할 경우 예를 들어, 0% -> 25% -> 50% -> 75% -> 100% 순서로 정의된 키프레임은 100% -> 75% -> 50% -> 25% -> 0% 순서로 재생된다.
  • animation-fill-mode: 애니메이션 시작 전후의 스타일을 설정합니다.
  • animation-play-state: 애니메이션 재생/일시 정지 상태를 설정합니다.

이러한 애니메이션 효과는 반드시 박스 형태로만 사용해야 하는 것은 아니다.

@keyframes ani1 {
  0% {
    transform: translateX(1000px);
    font-size: 10px;
    color: black;
  }
  100% {
    transform: translateX(0px);
    font-size: 50px;
    color: black;
  }
}

.text1 {
  width: 500px;
  height: 100px;
  color: transparent;
  animation-name: ani1;
  animation-delay: 1s; /* 3초 후에 애니메이션 시작 */
  animation-duration: 2s;
  animation-iteration-count:1;
  position: absolute;
  animation-timing-function:ease;
  animation-fill-mode: forwards;
  animation-play-state: running; /* 애니메이션 자동 시작 */
  transition: opacity 2s linear, transform 1s linear;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!DOCTYPE html>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="text1">
  <span >animation text</span>
  </div>
  </body>
    </html>

 

이런식으로 웹사이트에 들어가면 텍스트가 나타나는 연출또한 가능하다.

 

'프로그래밍 > css 심화' 카테고리의 다른 글

CSS 심화 공부(7) - flex item 속성(1) : flex item order  (0) 2025.03.12
CSS 심화 공부(6) - 플렉스 컨테이너의 속성(2) 정렬 방식 : justify-content, align-items, align-content  (0) 2025.03.12
CSS 심화 공부(5) - 플렉스 컨테이너의 속성(1) 레이아웃 방식 : display, direction, wrap, flow  (0) 2025.03.12
CSS 심화 공부(4) - Flexbox(플렉스 박스)  (0) 2025.03.12
CSS 심화 공부(2) - 동적 변화(transform)  (0) 2025.03.11

'프로그래밍/css 심화'의 다른글

  • 현재글CSS 심화 공부(3) - 동적 변화(animation)

관련글

티스토리툴바