14時の間食

CakePHPの記事を中心にWeb制作について

transitionによるCSSアニメーションがChromeでページ読み込み時に動作してしまう問題

CSS3

    Google Chromeでサイトの動作をチェックしていると、CSS3のtransitionプロパティで設定されたアニメーションがページロードの際に発生してしまう問題に直面しました。

    バグなのでしょうか。transition-property:allを至る所に使用しているため、ロードした瞬間にグニャッと。

    こんな感じです↓

    CSS3のtransitionがページ読み込み時に発生してしまう

    解決策

    解決策をググってみてもなかなか日本語の情報に辿りつけなかったのですが、こちらのサイトに有効な方法が紹介されていましたので共有したいと思います。

    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プロパティが無効になるという仕組みです。

    スマートな解決方法ではないかもしれませんが、無事ロード時のアニメーションを止めることができましたのでご参考までに。

    カテゴリー

    最近の記事

    Author

    • ささきち-このブログを書いてる人
      s3make@ささきち
      多摩川沿いに住むフリーのWebデザイナーです。近所のイオンによく行きます。