애니메이션

애니메이션은 상호작용 요소를 강조 표시하고 디자인에 흥미와 재미를 더하는 좋은 방법입니다. 이 모듈에서는 CSS로 애니메이션 효과를 추가하고 제어하는 방법을 알아봅니다.

인터페이스에 작은 도우미가 표시되는 경우가 있는데, 이를 클릭하면 특정 섹션에 관한 유용한 정보가 제공됩니다. 정보가 있고 상호작용해야 함을 미묘하게 알려주는 깜빡이는 애니메이션이 있는 경우가 많습니다. 그렇다면 CSS로 이 작업을 수행하려면 어떻게 해야 할까요?

CSS에서는 CSS 애니메이션을 사용하여 이러한 유형의 애니메이션을 만들 수 있으며, 이를 통해 키프레임을 사용하여 애니메이션 순서를 설정할 수 있습니다. 애니메이션은 간단한 단일 상태 애니메이션 또는 복잡한 시간 기반 시퀀스일 수도 있습니다.

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

애니메이션 소프트웨어, CSS 및 무언가에 애니메이션을 적용할 수 있는 대부분의 기타 도구에서 키프레임은 타임라인을 따라 타임스탬프에 애니메이션 상태를 할당하는 데 사용하는 메커니즘입니다.

이를 위한 컨텍스트로 '펄서'를 사용합시다. 전체 애니메이션은 1초 동안 실행되며 2가지 상태에서 실행됩니다.

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

@keyframes

이제 키프레임이 무엇인지 알았으니 CSS @keyframes 규칙이 작동하는 방식을 이해하는 데 도움이 될 것입니다. 다음은 두 가지 상태가 있는 기본 규칙입니다.

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

먼저 유의해야 할 부분은 맞춤 ID(맞춤 식별자)입니다. 즉, 키프레임 규칙의 이름입니다. 이 규칙의 식별자는 my-animation입니다. 맞춤 식별자는 함수 이름처럼 작동합니다. 함수 모듈에서 배운 것처럼 CSS 코드의 다른 위치에서 키프레임 규칙을 참조할 수 있습니다.

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

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

기간에 따라 원하는 만큼 위치를 추가할 수 있습니다. '펄서' 예시의 컨텍스트를 보면 상태가 2개 있으며, 이는 2개의 키프레임으로 변환됩니다. 즉, 키프레임 규칙 내에 두 개의 위치가 있어 각 키프레임의 변경사항을 나타냅니다.

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

animation 속성

CSS 규칙에서 @keyframes를 사용하려면 다양한 애니메이션 속성을 정의하거나 또는 animation 약식 속성을 사용합니다.

animation-duration

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

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

animation-timing-function

각 지점에서 애니메이션의 속도를 계산하는 타이밍 함수를 사용하면 애니메이션에서 자연스러운 모션을 재현할 수 있습니다. 계산된 값은 종종 곡선되어 애니메이션이 animation-duration 동안 가변 속도로 실행되고, 값이 @keyframes에 정의된 값을 넘어서 계산되면 요소가 튀어 오르는 것처럼 보입니다.

CSS에서 animation-timing-function 값으로 사용되는 여러 키워드(linear, ease, ease-in, ease-out, ease-in-out)가 있습니다.

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

이징 함수가 속도를 모델링하는 데 사용되는 베지어 곡선을 사용하여 계산되기 때문에 값이 이징 함수를 사용하면 곡선으로 나타납니다. 각 타이밍 함수 키워드(예: ease)는 사전 정의된 베지어 곡선을 참조합니다. CSS에서는 4개의 숫자 값(x1, y1, x2, y2)을 허용하는 cubic-bezier() 함수를 사용하여 베지어 곡선을 직접 정의할 수 있습니다.

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

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

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

steps 이징 함수

애니메이션을 더 세밀하게 제어해야 할 때가 있으며 곡선을 따라 이동하는 대신 간격으로 이동하는 것이 좋습니다. steps() 이징 함수를 사용하면 타임라인을 정의된 동일한 간격으로 나눌 수 있습니다.

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

첫 번째 인수는 단계 수입니다. 단계가 10개로 정의되고 10개의 키프레임이 있는 경우 각 키프레임은 상태 간 전환 없이 정확한 시간 동안 순서대로 재생됩니다. 단계에 대한 키프레임이 충분하지 않은 경우 두 번째 인수에 따라 키프레임 사이의 단계가 추가됩니다.

두 번째 인수는 방향입니다. 기본값인 end로 설정하면 타임라인이 끝날 때 단계가 완료됩니다. start로 설정하면 애니메이션의 첫 번째 단계가 시작되자마자 완료됩니다. 즉, end보다 한 단계 먼저 종료됩니다.

animation-iteration-count

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

animation-iteration-count 속성은 @keyframes 타임라인을 실행해야 하는 횟수를 정의합니다. 기본적으로 1로 설정되어 있습니다. 즉, 애니메이션이 타임라인의 끝에 도달하면 끝에서 중지됩니다. 음수는 입력할 수 없습니다.

애니메이션을 반복하는 infinite 키워드를 사용할 수 있습니다. 이는 이 과정 시작 부분의 '펄서' 데모가 작동하는 방식입니다.

animation-direction

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

애니메이션 방향을 사용하여 키프레임에서 타임라인이 실행되는 방향을 설정할 수 있습니다.

• normal: 기본값(전달)
• reverse: 타임라인에서 뒤로 실행됩니다.
• alternate: 애니메이션이 반복될 때마다 타임라인이 정방향 또는 역방향으로 순서대로 실행됩니다.
• alternate-reverse: alternate의 반대입니다.

animation-delay

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

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

animation-duration 속성과 달리 이 값을 음수 값으로 정의할 수 있습니다. 음수 값을 설정하면 @keyframes의 타임라인이 해당 지점에서 시작됩니다. 예를 들어 애니메이션 길이가 10초이고 animation-delay를 -5s로 설정하면 타임라인을 따라 절반에서 시작됩니다.

animation-play-state

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

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

animation-fill-mode

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

• forwards: 애니메이션 방향에 따라 마지막 키프레임이 유지됩니다.
• backwards: 애니메이션 방향에 따라 첫 번째 키프레임이 유지됩니다.
• both: forwards 및 backwards 모두의 규칙을 따릅니다.

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;
  }
}

이것이 반드시 애니메이션이 없는 것은 아니며, 특히 예기치 않은 애니메이션을 줄이기 위한 선호입니다. 이 환경설정과 전반적인 성능에 관한 자세한 내용은 이 애니메이션 가이드를 참고하세요.

학습 내용 확인하기

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