ホバー処理をした一般的なボタンを題材に、パフォーマンスや滑らかさなどを考慮した最適なコードを考察してみたいと思います。
- ホバー処理にGPU処理を取り入れて滑らかな動きにする
- will-changeでブラウザに事前通知してパフォーマンスを改善
- Safari（時々IE）でのちらつき防止
.element {
box-shadow: 5px 4px 0px 0 rgba(0,0,0,0.2);
transform: translate3d(0, 0, 0) perspective(0);
transition: all 1s ease-out;
backface-visibility: hidden;
}
.element:hover {
will-change: transform, transition, box-shadow;
box-shadow: 3px 2px 0px 0 rgba(0,0,0,0.2);
transform: translate3d(2px, 2px, 0) perspective(0);
}
想定する動き
マウスオンしたら
- 右に2px
- 下に2px
- 影とボタンの距離が近くなる（様に見せてる）
というようなエフェクトを想定しています。
ホバー処理にGPU処理を取り入れて滑らかな動きにする
ホバー処理は、transform: translate3D()とすることでGPUアクセラレーションが有効になりパフォーマンスが向上する。
簡潔に書くと、アニメーション処理をソフト（ブラウザ）が行うのではなく、ハード（グラフィックボード）が行うから滑らかな動きが実現する。
（一説には2D[translateやtranslateX、translateY]でも同結果が得られるらしいが、割愛）
参考
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Web制作にGPU処理を取り入れる
will-changeでブラウザに事前通知してパフォーマンスを改善
will-change を使用すると、要素のプロパティを変更する予定があることをブラウザに事前通知し、パフォーマンスを向上させることが出来る。（IE11、Edge以外）
will-change仕様のエディタであるタブ･アトキンス･ジュニアの引用
will-changeは、実際に変化させるプロパティ、実際に変化が生じる要素に設定してください。そして、変化が終了したら削除してください。
参考
CSS will-changeプロパティについて知っておくべきこと
Safari（時々IE）でのちらつき防止
以下のコードでSafariやIEでのアニメーション時のちらつきを防止しています。
backface-visibility:hidden;
transform: perspective(0);
TransformとTransitionを組み合わせている場合に、ちらつくことがあり背景色を指定しても発生することがあるそうな。
ただ私の制作時の現象では、Safariではなく、IE11で同現象が確認されました。
同様に上記のコードを書いたら解決したので、参考にさればと思います。
参考
Safari 8でCSS transformを指定した時にちらつくときの解消法
CSS Transformsで画面がちらつくときの対処法
以上、参考になれば幸いです。
間違っていることなどあったら是非コメントください。