DAY41.実務でよく使うアニメーションの付け方編 マウスホバー時の動きを付ける

01.マウスホバーのパターン１０選

hover {
　display: inline-block;
　padding: 0.6em 2em;
　margin: 0 0 1em;
　background-color: #4CAF50 ;
　color: #fff ;
　cursor: pointer;
　transition: all 0.3s ease 0s;
}

1.透明に近づける

.hover:hover {
　opacity: 0.6;
}

2.色が反転

.hover:hover {
　background: #333 ;
　color: #fff ;
}

3.凹むボタン

.hover:hover {
　border-bottom-color: transparent;
　transform: translateY(0.1875em);
}

4.浮き上がって影

.hover:hover {
　box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
　transform: translateY(-0.1875em);
}

5.X軸で回転

.hover:hover {
　transform: rotateX(360deg);
}

6.Y軸で回転

.hover:hover {
　transform: rotateY(360deg);
}

7.時計回りに回転

.hover:hover {
　transform: rotateZ(360deg);
}

8.画像が拡大

.hover10:hover {
　cursor: pointer;
　transform: scale(1.1, 1.1);
}

9.色を変える

.hover8:hover {
　color: #4CAF50 ;
}

10.アンダーラインが登場

.hover9 {
　display: inline-block;
　position: relative;
　text-decoration: none;
}
.hover9::after {
　position: absolute;
　content: '';
　bottom: 0;
　left: 0;
　width: 0;
　height: 1px;
　background: #2196F3 ;
　transition: all 0.3s ease 0s;
}
.hover9:hover {
　cursor: pointer;
}
.hover9:hover::after {
　width: 100%;
}

02.hoverとtransitionをセットで使う

マウスホバー時にちょっとしたアニメーションを加えると、
ユーザーにとって少し過ごし良さそうなサイトの印象をもたせられる

transition: all 0.3s ease 0s;
:hoverの疑似要素側ではない方に記載

03.transitionとtransformは相性がいい

拡大や回転、上に移動などのホバーアクションがあったが、
これらの動きは全部「transform」プロパティで行っている

transitionは「時間的変化」
・property　アニメーションさせるプロパティを指定　初期値none;
・duration　時間（アニメーションが動いている間）　初期値0s;
・timing-function　タイミング　初期値ease;
・delay　時間（アニメーションが開始するまでの間）　初期値0s;

transformは「変形」
・移動
・縮尺
・回転
・傾斜
・遠近効果

基本のホバーアクションは「透過」でOK

メニューは『現在のページ＋ホバーしてるメニュー』
にスタイルを付けるのが定石

アクション要素(ユーザーがクリックや選択等で操作可能な要素)
にはホバーアニメーションを付与する