CSSanimationの@keyframesを表現ごとに分割し、汎用性を持たせる - Qiita

この記事はun-T factory! XA Advent Calendar 2021８日目の記事です・ 概要 こんにちは、最近オフィスの一画にカフェ＆バーが完成し、営業許可証と食品衛生責任者の資格を取りに行った、フロントエンドエンジニアの茂吉です。 今回はCSSのanimationとkeyframesについて話したいと思います。 CSSアニメーションにはtransitionとanimationの２つがあり、CSSで複雑なアニメーションを実装する場合、animationプロパティを駆使して表現することが多いのではないでしょうか。 キーフレームを使うことで自由に表現することができる反面、一つのkeyframesに詰め込みすぎてしまうと、どのキーフレームで何のアニメーションをしているかがわかりづらくなります。 本記事は、CSSのkeyframesを表現ごとに分割することで可読性を高め、汎用性を持

[mumei-0]

“keyframesに複数のアニメーションを詰め込みすぎない”