[ CSS3 ] transform プロパティを使って CSS アニメーションを実行した際に要素がガタつくのを防ぐ方法

transform プロパティの scale で要素をズームしたり、translate で移動させるアニメーションを、transition で行った際に、アニメーションしている要素以外の部分が微妙にガタガタ動くという現象に遭遇しました。

実際の動き

実際の症状は下の画像のような動きです。マウスオーバーでアニメーションを実行すると、アニメーション要素でないテキストの部分が微妙に動いてしまいます…。

transform プロパティを使ったアニメーションで、アニメーション以外の要素がガタガタ動く

この現象は Chrome や Safari など、webkit 系のブラウザで発生するようです。ただ、起こる場合と起こらない場合があり、どういう状況で起こるのかまでは検証できませんでした…。

この CSS アニメーションのコード

対処法

このガタツキは以下のようにアニメーション要素に対して、3Dの方向に関する transform:translatez(0) 又は、transform:translate3d(0,0,0) を指定することで回避できます。

.アニメーション要素{
	-webkit-transform: translatez(0);
	// 又は
	-webkit-transform: translate3d(0,0,0);
}

-webkit-transform: translatez(0); を指定したアニメーションが以下の画像です。ガタツキがなくなりました!

-webkit-transform: translatez(0) を指定して症状が改善した様子

ガタツキが回避できる理由

アニメーションのガタツキが収まるのは、3D に関するプロパティを指定するとブラウザは通常の処理を行っているCPUから、アニメーションをスムーズに実行できるGPUを使用するようになるからのようです。

ただし、translatez(0) などの記述を追加すると通常の処理よりも、メモリを余分に使用することになりパフォーマンスの低下に繋がるようなので不必要に追加するのはよくないですね。 (当たり前ですが…)


使用するプロパティによってブラウザ内部の処理部分が変わってくるとは全く知らなかったので、思いもよらず勉強になりました。

しばらくブログを更新していなかったのですが、小さな事でもこうやってブログを書くと新たな発見があっておもしろいですね。下書きはたくさんあるので、またちょくちょく更新していけるとよいなと思っています。

Comments 2

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です