CSS 변수를 사용한 동적 애니메이션

키프레임 애니메이션은 그 자체로도 충분히 멋지지만 CSS 변수(일명 CSS 사용자 정의 속성)와 혼합하면 ⚡️ 다음 단계 ⚡️가 됩니다.

<style>
  @keyframes bounce {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-20px);
    }
  }

  .box {
    animation:
      bounce 300ms
      alternate infinite
      cubic-bezier(.2, .65, .6, 1);
  }
</style>

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

CSS 애니메이션은 일반적이고 재사용할 수 있지만 이 애니메이션은 항상 요소를 20px 바운스시킵니다. 서로 다른 요소가 서로 다른 "바운스 높이"를 제공할 수 있다면 멋지지 않을까요?

CSS 변수를 사용하면 정확히 다음과 같이 할 수 있습니다.

<style>
  @keyframes bounce {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(
        var(--bounce-offset)
      );
    }
  }

  .box {
    animation:
      bounce alternate infinite
      cubic-bezier(.2, .65, .6, 1);
  }
  .box.one {
    --bounce-offset: -20px;
    animation-duration: 200ms;
  }
  .box.two {
    --bounce-offset: -30px;
    animation-duration: 300ms;
  }
  .box.three {
    --bounce-offset: -40px;
    animation-duration: 400ms;
  }
</style>

<section>
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</section>

@keyframes 애니메이션이 업데이트되어 -20px로 튀는 대신 --bounce-offset 속성 값에 액세스합니다. 그리고 그 속성은 각 상자에서 다른 값을 갖기 때문에 각각 다른 양으로 바운스됩니다.

이 전략을 통해 재사용 가능하고 사용자 지정 가능한 키프레임 애니메이션을 만들 수 있습니다. React 구성 요소에 대한 소품이라고 생각하십시오!

Derived values with calc
So, something bothers me about the example above.
With the translateY function, positive values move the element down, negative values move the element up. We want to move the element up, so we have to use a negative value.

But this is an implementation detail. When I want to apply this animation, it's weird that I need to use a negative value.

CSS variables work best when they're semantic. Instead of setting --bounce-offset to a negative value, I'd much rather do this:

.box.one {
  --bounce-height: 20px;
}

Using calc, we can derive the true value from the provided value, within our @keyframes at-rule:

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(
      calc(var(--bounce-height) * -1)
    );
  }
}

We only define this keyframe animation once, but we'll likely use it many times. It's worth optimizing for the "consumer" side of things, to make it as pleasant to use as possible, even if it complicates the definition a bit.
calc lets us craft the perfect APIs for our keyframe animations. 💯