マウスオーバー（ホバー）でデザインが変わる設定方法は、以前の記事で紹介しました。
まだ読んでいない方は、先にこちらの記事をご確認ください。
今回は、ホバー時の変化のタイミングや速度（アニメーション）を調整する方法 を解説します。
CSSのトランジッション
ボタンにカーソルを乗せたとき、色やサイズが「ふわっ」と変わるような演出は、CSS では トランジション（transition） と呼びます。
Bricks では、このトランジションを CSS タブの設定欄 から入力できます（下図参照）。
しかし、CSS に不慣れな方は
「ここに何を書けばいいの？」
と悩むことが多いと思います。
そこで今回は、そのままコピペで使えるトランジション設定のサンプル をいくつか紹介します。
トランジション設定のサンプル
1. すべての変化をスムーズに
all 0.3s ease一番よく使う基本形。
ホバー時の色・サイズ・ボーダーなど全部にトランジションが適用される。
2. 色の変化をスムーズに（背景色・文字色など）
background-color 0.3s ease, color 0.3s easeホバーで背景色と文字色が変わるときに最適。
3. 透明度だけスムーズに
opacity 0.3s easeフェードイン・フェードアウトによく使う。
4. 位置や大きさのアニメーションを滑らかに
transform 0.3s easehover:scale(1.05) や hover:translateY(-5px) を滑らかにする時。
5. ふんわり動く（ゆっくり始まりゆっくり終わる）
all 0.4s ease-in-out6. 少し硬めでキビキビした動き
all 0.2s ease-out7. 遅れて動かす
all 0.3s ease 0.1s（最後の 0.1s が delay）
8. ナビやボタンの hover によく使う万能設定
color 0.2s ease, background-color 0.3s ease, border-color 0.3s ease
おすすめの “迷ったらコレ”
シンプルで万能
all 0.3s ease動きが多い UI 用
transform 0.3s ease, opacity 0.3s easeまとめ
このトランジッションの欄を埋めないとカクカクした動きになり、若干ぎこちない気がしますので、サンプルを参考に自分の好みに合ったコードを入れてみて下さい。
