New Article

CSSをminify化(ファイル圧縮)する際のCSSアニメーションの注意点

スポンサーリンク

CSSをminify化(ファイル圧縮)した際、CSSアニメーションが動かないという事があり、原因を調べてみました。
圧縮する際のエラーかなと思っていたのですが、エラーというよりはCSSの書き方に注意が必要でした。

事の発端

ワードプレステーマのCocoonには高速化機能があり、CSSファイルやJavaScriptファイルをminify化(ファイル圧縮)してくれる機能があるのですが、自分で追加した@keyframesを使ったCSSのアニメーションが動いておらず、minify化せずに、そのまま放置しておりました。

仕事ではCSSファイルをコンパイルしてminify化してるのですが、問題なく動いてる(それが普通)、ふ「原因は圧縮のようで圧縮じゃない?」と思い出し原因を探りました。

エラーになる原因

Cocoonでは「PHP Function to Minify HTML, CSS and JavaScript」というminify化のライブラリを使用しているみたいで、このライブラリがminify化の際に、余分な物としてソースの一部を除外されてしまいCSSアニメーションが動かなかった模様。

除外というのも、僕的には「しょうがないのかなぁ」と思う箇所で、以下のような@keyframesで「0%」を指定した際に今回の事例が起きました。

@keyframes fade {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }

CSSでは基本、0(ゼロ)は何をやっても絶対的に0だから単位は不要(僕はそう解釈)。
上記の様に@keyframesの「0%」は本来必要な内容ですが、このライブラリではminify化の際、不要な対象と認識され「%」が除外されてしまったのが原因です。

CSSアニメーション、対処法

対処方法は簡単、以下のように「0%」を「from」に変更すれば、問題ありません。

@keyframes fade {
     from {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }

まとめ

minify化の注意点というよりは、「どのツールでminify化したか」という所が一番重要な部分なので、今回書いた内容が当てはまる方は少ないかなと思います。

ただ、WPテーマCocoonで使用されている、「PHP Function to Minify HTML, CSS and JavaScript」ライブラリに限らず、コンパイルするツールによっては同じ事が起きるかもしれません。
対応・対策内容としては、めちゃくちゃ簡単なんで、すぐ解決できると思います。
そもそも、こんな事あまり発生しないと思いますが!

いつかブラウザ側が@keyframesの指定を「0」でも対応して、誰もこの事に気づかないまま、過ぎ去りそう。

スポンサーリンク
CSS
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

タイトルとURLをコピーしました