この記事のタイトルを見て「なんだこの記事 SCSS と CSS 間違えてるのか？」と思った方もいらっしゃるかと思いますが、間違いでもデマでもありません。
CSS では SCSS のように変数をつかうことができます。
その CSS の変数 (Variables) と CSS Animation を使えば幸せになれるのではないかと思いました。
どう幸せになれるのか？
ここでの 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 の関数も次々にいろいろなのが出てきてどんどん便利になっていってます。