どういうことか
CSSで複雑な遷移アニメーションを作りたいと思ったことはありませんか？私はよくあります。
ですが、transitionによる指定ではfromとtoの2状態間の遷移しか定義できません。例えば、次のアニメーションキーフレームをtransitionで定義することはできないのです。
@keyframes {
0% {
opacity: 0;
}
75% {
opacity: 1;
}
}
そこで、CSSアニメーションの仕様を使ってJavaScriptを使わずに上のような遷移アニメーションを実装してみようと思います。
結論から言うと、animation-fill-modeというCSSプロパティを指定すれば実現できます。このプロパティは、アニメーションの再生の前後の要素の状態(スタイル)を指定するものです。
下にそれぞれの値でどのようにアニメーションが変化するのか置いておきます。
See the Pen animation-fill-modeのデモ by Frodo la Intermeza Programisto (@boufrawfrodo2) on CodePen.
backwardsとbothだけちょっとわかりにくいですが、backwardsは最初animation-delayプロパティでアニメーションの実行が遅延されている間fromまたは0%(animation-directionがnomalかalternateの場合、reverseかalternate-reverseならtoか100%)のスタイルを維持します。bothは文字通りforwards + backwardsですね。
実際にやってみる
さて、このanimation-fill-modeですが、デフォルト値がnoneのため、アニメーション再生終了後keyframeのスタイルは破棄されます。そこでこれの値をforwardsしておけば、アニメーション終了後、つまり遷移完了後もkeyframeのスタイルが維持され続けるというわけ。
See the Pen @keyframesを使った遷移アニメ by Frodo la Intermeza Programisto (@boufrawfrodo2) on CodePen.
すみません、アドベントカレンダー記事なのに非常に内容が薄い記事でした。
もう少しだけ続くんじゃ
そもそもなんでこんなこと調べたかというと、javascriptを使ったアニメーションが好きではないからでした。ぶっちゃけてしまえば、このテクニックでjavascriptアニメーションの9割は消えると思っています。CSSでは実現できない残りの1割って何でしょう？
どれだけ考えてもCSSだけで実現する方法が思いつかなかったアニメーションとは、最近のUIデザインでもよくつかわれる、クリックした座標に効果をつけるアニメーションです。こちらの場合、アニメーションの部分はCSSで実装できます。が、クリックした座標に要素を作成したり動かしたりするのは今のところCSSでは無理です。attr()CSS関数がcontent以外の要素でもサポートされるようになれば希望はありますが、今は無理。CSSだけでアニメーションを完結させるのはまだ難しそうです。
ぶっちゃけパスデータ弄って形変えたりするのは、ほとんどshape-outsideプロパティで代用できます。面倒くさいけど。ただまぁ、CSS Shapes Module Level 1は2019年12月現在でCandidate Recommendationなので、まだ使っていいか微妙なところですが……。とはいえ、IEとEdge以外の主要ブラウザはかなり前からサポートしてますし、普通にプロダクトに使うのに十分そうではあります。いうものの、サポートしているブラウザも完全にサポートしているわけではなく、例えばpath()CSS関数はほとんどすべてのブラウザでサポートされていません。
See the Pen shape-outsideでそれっぽくアニメーション by Frodo la Intermeza Programisto (@boufrawfrodo2) on CodePen.
現状ではこれが限界ですし、こんなことするくらいなら圧倒的にjavascript使ったほうが簡単です……。