アニメーション時にウィンドウがガタつく件
posted : 2018.04.11
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
先ほどサイトデバッグ中にちょっとしたバグと遭遇しました。
CSSアニメーション時にウィンドウがガタつく！
毎回ではないんですが、CSSで割と派手なアニメーションをする時に一瞬ウィンドウがガタつくんですよね。ほんのすこーし。
一瞬地震かなにかと思いましたが、リロードを繰り返すと50％くらいの確立でしっかりガタついてました。
このサイトのトップページ、「introduction」セクションでは今のところAnimate.cssの「flipInY」というアニメーションを使っています。
Animate.cssは手軽に派手なアニメーションを実装できるCSSフレームワークですが、これ、使い方によってはちょっと注意が必要です。
恐らくtransform（3D系？）を使用したアニメーションで、なおかつ変形が大きいものに関しては、アニメーション中に指定要素のwidthが元々の値よりも拡がってしまい、結果的にウィンドウや親要素の幅も一瞬変わってしまうことが原因だと思います（たぶんです、たぶん）。
対して気になるレベルでもなかったんですけど、一旦気が付いちゃうとどーにも気になるわけで修正しました。
親要素にoverflow: hidden;で解決
上記原因が合っているかどうかは定かではないですが、アニメーション指定要素を包むセクションのクラスにoverflow: hidden;を指定したところ、ガタつきは全くなくなりました。ブラウザ固有（chrome）の現象かもしれませんが一件落着。
Animate.css、確かに実装は簡単ですが、個人的にはこういうちょっと気になる挙動が目立つ印象。
何でもかんでもフレームワークに頼りすぎないほうがいいのかもしれないですね。
