2020-07-11

カスタム・プロパティーとCSSアニメーション

本当は色相を徐々に変えたかったが、今の書き方のCSSとこの実装ではうまくできなかった。色をスクリプトで作ってやれば可能だが、カスタム・プロパティーで管理できなくなるので見送った。どう書いてうまくいかなかったか、の記録を残しておく。

:root {
  --hue: 45;
  --color-background: hsl(var(--hue) 50% 95%);

  transition: --hue 0.3s ease-in;
}

色相を徐々に変えたいだけだったので、このようにしたかったが、動かない。カスタム・プロパティーはtransition-propertyプロパティー(やそれに相当するもの)では指定できないようだ。もちろんallでも動かない。

:root {
  --hue: 45;
  --color-background: hsl(var(--hue) 50% 95%);
}

html {
  background-color: var(--color-background);
  transition: background-color 0.3s ease-in;
}

また、カスタム・プロパティーの更新では値が変化したと認識されないようで、transition-propertyプロパティーで指定しても反応してくれない。値そのものが変化する必要がありそうだ。

カスタム・プロパティー(を使った抽象化やカプセル化)とCSSアニメーションの組み合わせは鬼門なのかもしれない。Web Animation Level 1仕様のカスタム・プロパティーの項を読む限りは、うまく書けば動くように実装されるべきと読めるが、ちゃんと書く方法がよくわからない。もうちょっと調べて、うまい書き方が見つかることを祈っている。