애니메이션

인터페이스에 클릭하면 해당 섹션에 관한 유용한 정보를 제공하는 작은 도우미가 표시되는 경우가 있습니다. 이러한 정보에는 정보가 있음을 알리고 상호작용해야 함을 은근히 알리는 맥동 애니메이션이 포함되는 경우가 많습니다. 이 모듈에서는 CSS를 사용하여 이러한 도우미와 기타 애니메이션을 만드는 방법을 보여줍니다.

CSS를 사용하여 키프레임이 포함된 애니메이션 시퀀스를 설정할 수 있습니다. 이러한 시퀀스는 기본적인 단일 상태 애니메이션이거나 복잡한 시간 기반 시퀀스일 수 있습니다.

키프레임이란 무엇인가요?

대부분의 애니메이션 도구에서 키프레임은 타임라인의 타임스탬프에 애니메이션 상태를 할당하는 데 사용하는 메커니즘입니다.

예를 들어 다음은 '도우미' 점이 깜박이는 타임라인입니다. 애니메이션은 1초 동안 실행되며 2개의 상태가 있습니다.

1초 동안의 펄서 애니메이션 상태

이러한 각 애니메이션 상태는 시작과 종료가 이루어지는 특정 지점이 있습니다. 키프레임을 사용하여 타임라인에 매핑합니다.

이전과 동일한 다이어그램이지만 이번에는 키프레임이 포함되어 있습니다.

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

CSS @keyframes는 애니메이션 키프레임과 동일한 개념을 기반으로 합니다.

다음은 두 상태가 있는 예입니다.

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

첫 번째로 중요한 부분은 키프레임 규칙의 이름인 맞춤 식별자 (custom-ident)입니다. 이 예시의 식별자는 my-animation입니다. 맞춤 식별자는 함수 이름처럼 작동하므로 CSS 코드의 다른 위치에서 키프레임 규칙을 참조할 수 있습니다.

키프레임 규칙 내에서 fromto는 애니메이션의 시작과 끝인 0%100%를 나타내는 키워드입니다. 다음과 같이 동일한 규칙을 다시 만들 수 있습니다.

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

기간에 따라 원하는 만큼 포지션을 추가할 수 있습니다. 펄싱 도우미 예시에는 두 개의 키프레임으로 변환되는 두 가지 상태가 있습니다. 즉, 키프레임 규칙 내에 이러한 각 키프레임의 변경사항을 나타내는 두 가지 위치가 있습니다.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

animation 속성

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

CSS 규칙에서 @keyframes를 사용하려면 다양한 애니메이션 속성을 개별적으로 정의하거나 animation 약어 속성을 사용하면 됩니다.

animation-duration

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-duration: 10s;
}

animation-duration 속성은 @keyframes 타임라인의 길이를 시간 값으로 정의합니다. 기본값은 0초입니다. 즉, 애니메이션은 계속 실행되지만 너무 빠르게 표시되어 볼 수 없습니다. 음수 시간 값은 사용할 수 없습니다.

animation-timing-function

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

애니메이션에서 자연스러운 모션을 재현하려면 각 지점에서 애니메이션의 속도를 계산하는 타이밍 함수를 사용하면 됩니다. 계산된 값은 곡선형이므로 애니메이션이 animation-duration 중에 다양한 속도로 실행되고 브라우저가 @keyframes에 정의된 값을 초과하는 값을 계산하면 요소가 튀는 것처럼 보입니다.

CSS에는 animation-timing-function의 값으로 사용되는 여러 키워드(linear, ease, ease-in, ease-out, ease-in-out)가 사전 설정으로 제공됩니다.

.my-element {
    animation-timing-function: ease-in-out;
}

이중화는 속도를 모델링하는 데 사용되는 함수 유형인 Bézier 곡선을 사용하여 계산되므로 이중화 함수 값이 곡선처럼 보입니다. 각 타이밍 함수 키워드(예: ease)는 사전 정의된 베지어 곡선을 참조합니다. CSS에서는 cubic-bezier() 함수를 사용하여 베지어 곡선을 직접 정의할 수 있습니다. 이 함수는 x1, y1, x2, y2의 4가지 숫자 값을 허용합니다.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

이러한 값은 X축과 Y축을 따라 곡선의 각 부분을 표시합니다.

진행률 vs 시간 차트의 베지어

베지어 곡선을 이해하는 것은 복잡합니다. Lea Verou의 이 생성기와 같은 시각적 도구가 매우 유용합니다.

steps 이중 함수

곡선을 따라 이동하는 대신 간격을 두고 이동하여 애니메이션을 더 세부적으로 제어하고 싶을 때가 있습니다. steps() 이중 함수를 사용하면 타임라인을 동일한 길이의 정의된 간격으로 나눌 수 있습니다.

.my-element {
    animation-timing-function: steps(10, end);
}

첫 번째 인수는 단계 수입니다. 키프레임의 수가 단계와 동일하면 각 키프레임은 상태 간에 전환 없이 단계의 정확한 시간 동안 순차적으로 재생됩니다. 키프레임이 단계보다 적은 경우 브라우저는 두 번째 인수에 따라 키프레임 사이에 단계를 추가합니다.

두 번째 인수는 방향입니다. 기본값인 end로 설정된 경우 타임라인이 끝나면 단계가 완료됩니다. start로 설정하면 애니메이션이 시작되는 즉시 첫 번째 단계가 완료됩니다. 즉, end보다 한 단계 일찍 종료됩니다.

animation-iteration-count

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count 속성은 애니메이션 중에 @keyframes 타임라인이 실행되어야 하는 횟수를 정의합니다. 기본값은 1이며, 이는 애니메이션이 타임라인의 끝에 도달하면 애니메이션이 중지된다는 것을 의미합니다. 이 값은 음수일 수 없습니다.

애니메이션 루프를 만들려면 반복 횟수를 infinite로 설정합니다. 이 과정은 이 튜토리얼 시작 부분의 맥박 애니메이션이 작동하는 방식입니다.

animation-direction

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-direction: reverse;
}

animation-direction을 사용하여 타임라인이 키프레임 위에서 실행되는 방향을 설정할 수 있습니다. 이 속성은 다음 값을 사용합니다.

  • normal: 기본값으로 앞으로입니다.
  • reverse: 타임라인을 거꾸로 탐색합니다.
  • alternate: 애니메이션 반복마다 타임라인이 앞뒤로 실행되기를 번갈아 합니다.
  • alternate-reverse: alternate와 같지만 타임라인이 뒤로 실행되면서 애니메이션이 시작됩니다.

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-delay: 5s;
}

animation-delay 속성은 브라우저가 애니메이션을 시작하기 전에 대기하는 시간을 정의합니다. animation-duration 속성과 마찬가지로 시간 값을 허용합니다.

animation-duration과 달리 animation-delay를 음수 값으로 정의할 있으며, 그러면 애니메이션이 타임라인의 해당 지점에서 시작됩니다. 예를 들어 애니메이션 길이가 10초이고 animation-delay-5s로 설정하면 애니메이션이 타임라인의 중간 지점에서 시작됩니다.

animation-play-state

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element:hover {
    animation-play-state: paused;
}

animation-play-state 속성을 사용하면 애니메이션을 재생하고 일시중지할 수 있습니다. 기본값은 running입니다. paused로 설정하면 애니메이션이 일시중지됩니다.

animation-fill-mode

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

animation-fill-mode 속성은 애니메이션이 시작되기 전이나 종료된 후에 @keyframes 타임라인에서 유지되는 값을 정의합니다. 기본값은 none이며, 애니메이션이 완료되면 타임라인의 값이 삭제됩니다. 그 밖에도 다음과 같은 옵션이 있습니다.

  • forwards: 애니메이션 방향에 따라 마지막 키프레임이 유지됩니다.
  • backwards: 첫 번째 키프레임은 애니메이션 방향에 따라 유지됩니다.
  • both: 첫 번째 키프레임과 마지막 키프레임이 모두 유지됩니다.

animation 약어

각 속성을 개별적으로 정의하는 대신 animation 약어로 정의할 수 있습니다. 그러면 다음 순서로 애니메이션 속성을 정의할 수 있습니다.

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

애니메이션을 사용할 때의 고려사항

사용자는 애플리케이션 및 웹사이트와 상호작용할 때 운영체제를 감소된 모션을 선호하도록 설정할 수 있습니다. prefers-reduced-motion 미디어 쿼리를 사용하여 이 환경설정을 감지할 수 있습니다.

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

반드시 애니메이션을 사용하지 않겠다는 의미는 아닙니다. 애니메이션이 적은 것을 선호하며 특히 예상치 못한 애니메이션을 선호하지 않습니다. 이 환경설정 및 전반적인 성능에 관한 자세한 내용은 애니메이션 가이드를 참고하세요.

이해도 확인

애니메이션에 대한 지식 테스트

@keyframes 애니메이션의 이름 또는 맞춤 식별자는 대소문자를 구분하나요?

아니요

fromto 키워드는 다음과 같습니다.

0%100%.
startend.
01

animation-timing-function는 다음과 같은 다른 이름으로도 알려져 있습니다.

지연
이징 효과
동적 타이밍

@keyframes 애니메이션 내에서 필요한 최소 키프레임 수는 얼마인가요?

4
3
2
1