サイト表示時にTransitionでホバーアニメーションが実行されてしまう場合の対処法
transitionプロパティを使用してサイト上のアニメーションを作成していると、たまにGoogle Chromeで画面読み込み時に意図せずアニメーションが発生してしまう時があります。
発生した症状
読み込み時にtransitionでアニメーションしながら、最終的に目的の形になっていきます。
非常に気になるので、解決策を探してみたところこちらの記事にたどり着きました。
transitionをnoneにするclassを<body>タグへ付けておいて、読み込みが完了したらそのclassを外す。という方法です。
解決方法（jQuery）
コードは参考記事のままになってしまいますが、jQueryを使っている（使える）状態であれば下記のコードで解決されます。
HTML<body class="preload">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を使用するサイトでは、とりあえずこのコードを付けておきたいですね。
Backlogで2段階認証を設定後、SourceTreeでアカウントエラーが発生する場合の対処法 
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法 
Visual Studio Codeの基本｜概要やインストールから日本語化など最低限の設定方法 
Visual Studio Codeでできる最低限のGit操作方法 
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法 
goenvを使って、MacにGo言語をインストールする 
gulpでPostCSSを使う方法 
Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」 
Emmetで複数のタグを一括展開して、コーディングスピードをさらに上げる方法 
CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法 
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない 
Google Chromeのサイト内検索（カスタム検索）機能を別のプロファイルに移行する方法 
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法 
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法 
Keynoteで有効にしているはずのフォントが表示されない現象 
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法 
AirPodsで片耳を外しても再生が止まらないようにする方法 
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ 
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること 
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する 
Googleカレンダーを便利に活用するための小技集（祝日だけを表示・月末の繰り返しイベントを追加） 
Obsidianを使った「自己流PKM」で行う知識トレーニング 
テキストエディタ・ノートアプリ関連のショートカットキーをKeyboard Maestroで統一する 
Path Finderを使ってキーボードだけでファイル操作する方法（応用編） 
macOSのコマンドパレット比較！SpotlightとAlfred、Raycastどれを使えばいい？ 
1つのノートアプリにすべて集約するのをやめた理由｜2025年時点のノートアプリの使い分け 
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う 
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」 
Gitで1行しか変更していないはずのに全行変更した判定になってしまう