すごい久々のテック記事です。
いつものようにcss アニメーションを使っていたんですが、思いつきでカスタム変数を使えないか試してみたらうまくいったんで記事にしてみます。

今までのCSS アニメーション

See the Pen moveAnim by knap_develp (@knap_develp) on CodePen.

今までは同じ上下の動きでも動かす量を変えたりしたかったら別でkeyframeを作る必要がありました。
なので汎用性が低く、いくつも作らなければならず悶々としていました。

しかし、カスタム変数をkeyframe内で扱えることがわかって幾つも作らなければならない問題が解決しました。

カスタム変数を使ったCSSアニメーション

See the Pen Untitled by knap_develp (@knap_develp) on CodePen.

keyframeの動く量のところにカスタム変数を使用することで場所によって数値を変えて方向を反転させたり動かす量を変えられるようになりました。これで以前に比べるとかなり汎用性が上がりました。
やったー！