transitionによるCSSアニメーションがChromeでページ読み込み時に動作してしまう問題
CSS3
Google Chromeでサイトの動作をチェックしていると、CSS3のtransitionプロパティで設定されたアニメーションがページロードの際に発生してしまう問題に直面しました。
バグなのでしょうか。transition-property:allを至る所に使用しているため、ロードした瞬間にグニャッと。
こんな感じです↓
解決策
解決策をググってみてもなかなか日本語の情報に辿りつけなかったのですが、こちらのサイトに有効な方法が紹介されていましたので共有したいと思います。
Transitions Only After Page Load
http://css-tricks.com/transitions-only-after-page-load/
内容は紹介されているものほぼそのままになってしまいますが、HTML, CSS, JavaScriptに以下の3つの記述を加えます。
HTML
<body class="preload">
bodyタグにpreloadクラスを付加
CSS
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
元記事の記述にはプレフィックスの付いていないtransitionプロパティがなかったので付加しました。
jQuery(※予めjQueryがロード済みであること)
$(window).load(function() {
$("body").removeClass("preload");
});
この記述が何をやっているか
.preload *というセレクタでbodyタグ内の全ての要素にtransition:none;を!importantで強制的に指定し、ページの読み込みが終わるとjQueryがbodyタグのpreloadクラスを除去しています。
つまり、ページを読み込んでいる最中だけ、body内全てのtransitionプロパティが無効になるという仕組みです。
スマートな解決方法ではないかもしれませんが、無事ロード時のアニメーションを止めることができましたのでご参考までに。
