LoginSignup
25

More than 5 years have passed since last update.

CSS Variables(カスタムプロパティ) は CSS Animation と使うと幸せ

Last updated at Posted at 2017-06-18

この記事のタイトルを見て「なんだこの記事 SCSS と CSS 間違えてるのか?」と思った方もいらっしゃるかと思いますが、間違いでもデマでもありません。

CSS では SCSS のように変数をつかうことができます。

その CSS の変数 (Variables) と CSS Animation を使えば幸せになれるのではないかと思いました。

どう幸せになれるのか?

ここでの CSS Animation とは、 @keyframes で定義したアニメーションを animation プロパティで指定して使うものとします。

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

.anim {
  animation: anim .2s;
}

Peek 2017-06-18 12-45.gif

さて、では上のような終了時の値だけが違う場合はどう書きますか?
全てのパターンを @keyframes で書いていきますか?
JavaScript で終了時の値を動的に作らなければならない場合は?

…… :spaghetti: になることは想像に難くありません。

アニメーションの一部分だけ変える、という時にこの 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 で動的にアニメーションを生成することもできます。

Peek 2017-06-18 13-17.gif

CodePenにてデモを公開しています。

おわりに

CSS Variables、もっと面白そうな使い方ができそうです!
CSS の関数も次々にいろいろなのが出てきてどんどん便利になっていってます。

参考

CSS Variables(カスタムプロパティ)でCSSがより便利に! - Qiita

CSSの変数を使う - CSS | MDN

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25