애니메이션 기능

타이밍 기능

키프레임 애니메이션에 대해 동일한 타이밍 함수 라이브러리에 액세스할 수 있습니다. 그리고 transition 와 마찬가지로 기본값은 ease 입니다.
animation-timing-function 속성으로 재정의할 수 있습니다.

<style>
  @keyframes slide-in {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  .box {
    animation: slide-in 1000ms;
    animation-timing-function: linear;
  }
</style>

<div class="box">
  Hello World
</div>

반복되는 애니메이션

기본적으로 키프레임 애니메이션은 한 번만 실행되지만 animation-iteration-count 속성으로 이를 제어할 수 있습니다.

<style>
  @keyframes slide-in {
    from {
      transform: translateX(-100%);
      opacity: 0.25;
    }
    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  .box {
    animation: slide-in 1000ms;
    animation-iteration-count: 3;
  }
</style>

<div class="box">
  Hello World
</div>

이와 같이 정수를 지정하는 것은 다소 드물지만 유용한 특수 값이 하나 있습니다: infinite .

예를 들어 로딩 스피너를 만드는 데 사용할 수 있습니다.

<style>
  @keyframes spin {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }

  .spinner {
    animation: spin 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
</style>

<img
  class="spinner"
  alt="Loading…"
  src="/images/keyframe-animations/loader.svg"
/>

스피너의 경우 모션이 일정하도록 일반적으로 linear 타이밍 기능을 사용하려고 합니다(이는 다소 주관적입니다. 변경하고 어떻게 생각하는지 확인하십시오!).

다단계 애니메이션

from 및 to 키워드 외에도 백분율도 사용할 수 있습니다. 이를 통해 2단계 이상을 추가할 수 있습니다.

<style>
  @keyframes fancy-spin {
    0% {
      transform: rotate(0turn) scale(1);
    }
    25% {
      transform: rotate(1turn) scale(1);
    }
    50% {
      transform: rotate(1turn) scale(1.5);
    }
    75% {
      transform: rotate(0turn) scale(1.5);
    }
    100% {
      transform: rotate(0turn) scale(1);
    }
  }

  .spinner {
    animation: fancy-spin 2000ms;
    animation-iteration-count: infinite;
  }
</style>

<img
  class="spinner"
  alt="Loading…"
  src="/images/keyframe-animations/loader.svg"
/>

백분율은 애니메이션의 진행률을 나타냅니다. from는 정말 단순한 구문 설탕입니까? 0% . 그리고 to는 100%에 대한 설탕이다.

중요한 것은 타이밍 기능이 각 단계에 적용된다는 것입니다. 우리는 전체 애니메이션에 대해 단일 이즈를 얻지 못합니다.

이 플레이그라운드에서 두 스피너는 2초에 1회전을 완료합니다. 그러나 multi-step-spin는 이를 4개의 개별 단계로 나누고 각 단계에는 타이밍 기능이 적용됩니다.

<style>
  @keyframes spin {
    0% {
      transform: rotate(0turn);
    }
    100% {
      transform: rotate(1turn)
    }
  }

  @keyframes multi-step-spin {
    0% {
      transform: rotate(0turn);
    }
    25% {
      transform: rotate(0.25turn);
    }
    50% {
      transform: rotate(0.5turn);
    }
    75% {
      transform: rotate(0.75turn);
    }
    100% {
      transform: rotate(1turn);
    }
  }

  .spinner {
    animation: spin 2000ms;
    animation-iteration-count: infinite;
  }
  .multi-step-spinner {
    animation: multi-step-spin 2000ms;
    animation-iteration-count: infinite;
  }
</style>

<img
  class="spinner"
  alt="Loading…"
  src="/images/keyframe-animations/loader.svg"
/>
<img
  class="multi-step-spinner"
  alt="Loading…"
  src="/images/keyframe-animations/loader.svg"
/>

안타깝게도 Web Animations API를 사용하여 구성할 수 있지만 CSS 키프레임 애니메이션을 사용하여 이 동작을 제어할 수는 없습니다.

교대 애니메이션

요소가 부풀어 오르고 수축하면서 "호흡"하기를 원한다고 가정해 봅시다.

3단계 애니메이션으로 설정할 수 있습니다.

<style>
  @keyframes grow-and-shrink {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }

  .box {
    animation: grow-and-shrink 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
</style>

<div class="box"></div>

지속 시간의 전반부를 기본 크기의 1.5배로 늘리는 데 소비합니다. 정점에 도달하면 후반부를 다시 1x로 줄입니다.

이것은 작동하지만 동일한 효과를 달성하는 더 우아한 방법이 있습니다. animation-direction 속성을 사용할 수 있습니다.

<style>
  @keyframes grow-and-shrink {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.5);
    }
  }

  .box {
    animation: grow-and-shrink 2000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
</style>

<div class="box"></div>

animation-direction는 시퀀스의 순서를 제어합니다. 기본값은 normal 이며 지정된 기간 동안 0%에서 100%로 변경됩니다.
reverse 로 설정할 수도 있습니다. 이렇게 하면 애니메이션이 100%에서 0%로 거꾸로 재생됩니다.

그러나 흥미로운 부분은 alternate 로 설정할 수 있다는 것입니다. 그러면 후속 반복에서 normal 와 reverse 사이를 핑퐁합니다.

확대 및 축소되는 하나의 큰 애니메이션을 사용하는 대신, 애니메이션을 확대하도록 설정한 다음 다음 반복에서 반전하여 축소되도록 합니다.

Half the duration
Originally, our "breathe" animation lasted 4 seconds. When we switched to the alternate strategy, however, we cut the duration in half, down to 2 seconds.
This is because each iteration only performs half the work. It always took 2 seconds to grow, and 2 seconds to shrink. Before, we had a single 4-second-long animation. Now, we have a 2-second-long animation that requires 2 iterations to complete a full cycle.

속기 값

이 레슨에서 많은 애니메이션 속성을 선택했으며 많은 타이핑이 있었습니다!

다행스럽게도 transition 와 마찬가지로 animation 속기를 사용하여 이러한 모든 속성을 결합할 수 있습니다.

위의 애니메이션은 다시 작성할 수 있습니다.

.box {
  /*
  From this:
    animation: grow-and-shrink 2000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  ...to this:
  */
  animation: grow-and-shrink 2000ms ease-in-out infinite alternate;
}

여기에 좋은 소식도 있습니다. 순서는 중요하지 않습니다. 대부분의 경우 이러한 속성을 원하는 순서로 던질 수 있습니다. 특정 시퀀스를 외울 필요가 없습니다.

예외가 있습니다: animation-delay , 곧 자세히 설명할 속성은 두 속성이 동일한 값 유형(밀리초/초)을 사용하기 때문에 기간 뒤에 와야 합니다.

이러한 이유로 속기에서 지연을 제외하는 것을 선호합니다.

.box {
  animation: grow-and-shrink 2000ms ease-in-out infinite alternate;
  animation-delay: 500ms;
}