Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

애니메이션

애니메이션은 상호작용 요소를 강조 표시하고 흥미를 더할 수 있는 좋은 방법입니다. 디자인에 재미를 더해 줄 수 있습니다. 이 모듈에서는 애니메이션을 적용할 수 있습니다.

때로는 유용한 기능을 제공하는 인터페이스에 작은 도우미가 나타나기도 합니다. 해당 섹션에 대한 정보를 볼 수 있습니다. 이러한 엔드포인트에는 보통 깜빡이는 애니메이션을 통해 정보가 전달되고 있음을 알리고 상호작용해야 합니다 이 모듈에서는 CSS

아이콘이 깜빡이는 것은 사용자가 중요한 정보에 주의를 기울이세요

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

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

대부분의 애니메이션 도구에서 키프레임은 애니메이션을 할당하는 데 사용하는 메커니즘입니다. 타임스탬프로 변환할 수 있습니다.

예를 들어 깜빡이는 '도우미' 타임라인은 다음과 같습니다. . 애니메이션이 실행됩니다. 2개의 상태가 있습니다

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

이전과 같은 다이어그램이지만 이번에는 키프레임이 있음 — 키프레임이 있는 깜빡이는 애니메이션

`@keyframes`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

기간별로 원하는 만큼 위치를 추가할 수 있습니다. 깜박이는 도우미 예시에서는 2로 변환되는 두 개의 상태가 있습니다. 맞춤설정할 수 있습니다. 즉, 키프레임 규칙 내에 두 개의 위치가 있으면 각 키프레임의 변경사항을 나타냅니다.

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

pulse 규칙을 수정하여 애니메이션이 어떻게 작동하는지 확인해 보세요. 확인할 수 있습니다.

`animation` 속성

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

`animation-duration`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

animation-duration 속성은 @keyframes 타임라인의 길이를 시간 값으로 정의합니다. 기본값은 0초입니다. 즉, 애니메이션이 계속 실행되지만 볼 수 있습니다. 시간 값은 음수일 수 없습니다.

`animation-timing-function`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

애니메이션에서 자연스러운 모션을 재현하려면 각 지점의 애니메이션 속도를 계산할 수 있습니다. 계산된 값은 종종 곡선: 애니메이션이 진행되는 동안 가변 속도로 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에서는 cubic-bezier() 함수를 사용하여 베지어 곡선을 직접 정의할 수 있습니다. 네 개의 숫자 값(x1, y1, x2, y2)을 허용합니다.

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

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

베지어 곡선을 이해하는 것은 복잡합니다. 다음과 같은 시각적 도구 생성기가 도움이 되었습니다.

`steps` 이징 함수

애니메이션을 좀 더 세밀하게 제어하고 싶을 때가 있습니다. 곡선을 따라 이동하는 대신 간격으로 이동하게 됩니다. steps() 이징 함수를 사용하면 타임라인을 동일한 기간의 지정된 간격으로 나눕니다.

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

첫 번째 인수는 숫자 단계입니다. 동일한 수의 단계인 경우 각 키프레임은 상태 간 전환이 없는 단계입니다. 단계보다 키프레임 수가 적으면 브라우저에서 단계 사이에 단계를 추가합니다. 키프레임을 조정할 수 있습니다.

두 번째 인수는 방향입니다. end로 설정된 경우 기본적으로 타임라인이 끝날 때 단계가 완료됩니다. start로 설정된 경우 애니메이션의 첫 번째 단계가 시작되자마자 완료됩니다. 즉, end보다 한 단계 빨리 종료됩니다.

단계가 있는 애니메이션과 없는 애니메이션을 비교합니다.

`animation-iteration-count`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

animation-iteration-count 속성은 @keyframes 타임라인이 실행되어야 하는 횟수를 애니메이션을 적용할 수 있습니다. 기본적으로 1로, 애니메이션이 시작되었을 때 애니메이션이 중지된다는 뜻입니다. 타임라인의 끝에 도달합니다. 이 값은 음수일 수 없습니다.

이 애니메이션의 반복 횟수를 변경해 보세요.

애니메이션을 반복하려면 반복 횟수를 infinite로 설정합니다. 이렇듯 깜박이는 애니메이션이 효과가 있습니다.

깜빡이는 애니메이션이 무한 반복됩니다.

`animation-direction`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

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

normal: 기본값이며 정방향입니다.
reverse: 타임라인에서 역방향으로 실행됩니다.
alternate: 애니메이션이 반복될 때마다 타임라인이 앞뒤로 실행할 수 있습니다
alternate-reverse: alternate와 같지만, 애니메이션은 타임라인이 있습니다

애니메이션 방향을 변경해 보세요.

`animation-delay`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

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

animation-duration와 달리 animation-delay를 음수로 정의할 수 있습니다. 값을 사용하여 애니메이션이 시작되어야 하는 지점에서 확인할 수 있습니다 예를 들어 애니메이션 길이가 10초이고 animation-delay를 -5s로 변경하면 애니메이션이 확인할 수 있습니다

애니메이션 지연을 변경해 보세요.

`animation-play-state`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

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

애니메이션 요소 위에 커서를 올려 놓으면 애니메이션이 일시중지될 수 있습니다.

`animation-fill-mode`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

animation-fill-mode 속성은 @keyframes 타임라인에서 어떤 값이 또는 재생이 끝난 후에 발생합니다. 기본값은 none이며 애니메이션이 완료되면 타임라인의 값이 삭제됩니다. 그 밖에도 다음과 같은 옵션이 있습니다.

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

채우기 모드를 변경해 보세요.

`animation` 약식

각 속성을 개별적으로 정의하는 대신 animation 약식: 이 메서드를 사용하면 다음과 같은 순서를 따릅니다.

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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;
  }
}

이 옵션은 애니메이션이 없는 경우의 환경설정이 아닙니다. 더 적은 것을 선호함 특히 덜 예기치 않은 애니메이션을 사용해야 합니다 GNI의 웹사이트인 g.co/newsinitiative에서 전반적인 실적은 애니메이션 가이드를 참조하세요.

애니메이션 축소의 예를 사용해 보세요.

이해도 확인

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

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

예

🎉

아니요

CSS에서는 2개의 애니메이션이 동일한 이름을 가질 수 없지만 SWOOP 및 swoop는 공존할 수 있습니다.

키워드 from 및 to는 다음과 동일합니다.

start 및 end.

다시 시도해 보세요.

0% 및 100%.

from은 0%와 같고 to는 100%와 동일합니다.

0 및 1

다시 시도해 보세요.

animation-timing-function는 일반적으로 다음과 같이 알려져 있습니다.

동적 타이밍

다시 시도해 보세요.

지연

다시 시도해 보세요.

이징 효과

🎉

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

브라우저는 요소의 현재 상태를 키프레임으로 취하므로 최소한 1개의 키프레임이 필요합니다.

다시 시도해 보세요.

애니메이션

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

@keyframes

animation 속성

animation-duration

animation-timing-function

steps 이징 함수

animation-iteration-count

animation-direction

animation-delay

animation-play-state

animation-fill-mode

animation 약식

애니메이션 작업 시 고려사항

이해도 확인

`@keyframes`

`animation` 속성

`animation-duration`

`animation-timing-function`

`steps` 이징 함수

`animation-iteration-count`

`animation-direction`

`animation-delay`

`animation-play-state`

`animation-fill-mode`

`animation` 약식