# サイト表示時にTransitionでホバーアニメーションが実行されてしまう場合の対処法 URL: https://webrandum.net/transition-execute-error/ 公開日: 2019-04-16 更新日: 2019-04-16 カテゴリー: コーディングタグ: CSS, JavaScript, jQuery 出典: Webrandum（著者: サイトウマサカズ） transitionプロパティを使用してサイト上のアニメーションを作成していると、たまにGoogle Chromeで画面読み込み時に意図せずアニメーションが発生してしまう時があります。 ## 発生した症状読み込み時にtransitionでアニメーションしながら、最終的に目的の形になっていきます。非常に気になるので、解決策を探してみたところ[こちらの記事](http://14-00.com/archives/31)にたどり着きました。 [![](https://www.google.com/s2/favicons?domain=14-00.com)14-00.com![](https://s.wordpress.com/mshots/v1/http%3A%2F%2F14-00.com%2Farchives%2F31?w=160)transitionによるCSSアニメーションがChromeでページ読み込み時に動作してしまう問...http://14-00.com/archives/31](http://14-00.com/archives/31) transitionをnoneにするclassを``タグへ付けておいて、読み込みが完了したらそのclassを外す。という方法です。 ## 解決方法（jQuery）コードは参考記事のままになってしまいますが、jQueryを使っている（使える）状態であれば下記のコードで解決されます。 ``` HTML ``` ``` CSS.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; } ``` ``` jQuery$(window).load(function() { $("body").removeClass("preload"); }); ``` ## 解決方法（JavaScript）まっさらなJavaScriptで解決したい場合は下記のコードで解決します（HTMLとCSSは上記のjQueryと全く同じ）。 ``` JavaScriptwindow.onload = function(){ const preload = document.getElementsByClassName('preload'); preload[0].classList.remove('preload'); } ``` transitionを使用するサイトでは、とりあえずこのコードを付けておきたいですね。