애니메이션

애니메이션은 상호작용 요소를 강조하고 디자인에 흥미와 재미를 더할 수 있는 좋은 방법입니다. 이 모듈에서는 CSS로 애니메이션 효과를 추가하고 제어하는 방법에 대해 알아보겠습니다.

인터페이스를 클릭하면 현재 섹션에 관한 유용한 정보를 제공하는 작은 도우미가 인터페이스에 표시될 때가 있습니다. 대개 깜빡이는 애니메이션이 있어 정보의 존재와 상호작용이 이루어져야 함을 미묘하게 알려줍니다. 이 모듈에서는 CSS를 사용하여 이러한 도우미와 기타 애니메이션을 만드는 방법을 보여줍니다.

CSS를 사용하여 키프레임으로 애니메이션 순서를 설정할 수 있습니다. 이러한 시퀀스는 기본 한 상태 애니메이션 또는 복잡한 시간 기반 시퀀스일 수 있습니다.

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

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

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

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

@keyframes

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

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

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

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

키프레임 규칙 내에서 from 및 to는 애니메이션의 시작과 끝인 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 속성

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

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

두 번째 인수는 방향입니다. 기본값인 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;
}

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

• normal: 기본값이며 전달입니다.
• reverse: 타임라인에서 역방향으로 실행됩니다.
• alternate: 애니메이션이 반복될 때마다 타임라인이 정방향 실행과 역방향 실행 사이를 번갈아 표시합니다.
• alternate-reverse: alternate와 같지만 애니메이션은 역방향으로 실행되는 타임라인으로 시작됩니다.

animation-delay

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

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

animation-duration와 달리 animation-delay를 음수 값으로 정의할 수 있습니다. 이렇게 하면 애니메이션이 타임라인의 상응하는 지점에서 시작됩니다. 예를 들어 애니메이션 길이가 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: 첫 번째 및 마지막 키프레임이 모두 유지됩니다.

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

이렇다고 반드시 애니메이션을 사용하지 않는 것은 아닙니다. 이 옵션은 애니메이션을 적게 사용하는 것이 좋으며, 특히 예상치 못한 애니메이션이 덜 적합합니다. 이 환경설정과 전반적인 성능에 관한 자세한 내용은 애니메이션 가이드를 참고하세요.

이해도 테스트

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