CSS Variables는 CSS Animation과 함께 사용하면 행복합니다.

이 기사의 제목을 보고 "이 기사는SCSS와 CSS가 왜 틀렸을까?"나는 누군가가 이렇게 생각할 것이라고 생각한다. 그러나 잘못도 헛소문도 아니다.
CSS에서 SCSS처럼 변수를 사용할 수 있습니다.
CSS 변수와 CSS 애니메이션을 쓰면 행복할 수 있지 않을까 생각합니다.

어떻게 하면 행복할 수 있을까?

여기CSS Animation는 @keyframes에 정의된 애니메이션이 animation 속성에 지정되어 사용되는 것을 말합니다.
예제

@keyframes anim {
  from {width: 0}
  to {width: 100%}
}

.anim {
  animation: anim .2s;
}

그렇다면 상술한 끝날 때의 값만 다르면 어떻게 씁니까?
모든 모드를 @keyframes로 쓰시겠습니까?
끝 값을 JavaScript로 동적으로 만들어야 하는 경우?
이 될 줄은 상상하기 어렵지 않다.
이 CSS Variable은 애니메이션의 일부만 변경할 때 크게 활성화됩니다.
HTML

<div class="anim anim-1"></div>
<div class="anim anim-2"></div>
<div class="anim anim-3"></div>

CSS

@keyframes anim {
  from {width: 0}
  to {width: var(--max)}
  /* ポイント: @keyframes 内で変数を参照できる */
}

.anim {
  background: #1bb8f3;
  height: 30px;
  margin: 10px;
  width: 0;
  animation: anim linear 2s infinite alternate;
}

.anim-1 {
  --max: 50%;
}

.anim-2 {
  --max: 30%;
}

.anim-3 {
  --max: 10%;
}

이렇게 쓰면 변수--max의 값만 바꾸면 끝날 때만 다른 애니메이션을 만들 수 있다.
JavaScript

const el = document.createElement("div");
el.classList.add("anim");
el.style.setProperty("--max", Math.random() * 100 + "%");
// ランダムな終了時の値を指定
// ポイント: element.style.setProperty で変数を指定できる
anims.appendChild(el);

또한 JavaScript를 통해 애니메이션을 동적으로 생성할 수도 있습니다.

코드펜에서 시위행진을 공개했다.

끝말

CSS Variables, 더 재미있게 사용할 수 있을 것 같아요!
CSS의 함수도 하나둘씩 다양한 기능이 등장하면서 점점 편리해졌다.

참고 자료

CSS Variables(사용자 정의 속성)를 통해 CSS를 더욱 편리하게 만듭니다! -Qiita
CSS 변수 사용 - CSS|MDN