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


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

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

Related Article

2 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ