ホバーアニメーション
ホバー時にアニメーションするボタンを作成してください。なおアニメーション時間は全て0.4秒(0.4s)とします。
ホバーで半透明になるボタン
ホバーでふわっと半透明になります。
半透明にするには、opacityプロパティを使用します。
opacity: (透明度); ※0:完全に透明、1:不透明
ホバーで拡大するボタン
ホバーで1.1倍に拡大します。
Buttonホバーで角丸になるボタン
ホバーで50pxの角丸にします。
Buttonホバーで角丸にするには、border-radiusプロパティを使用します。
border-radius: (丸くする量);
ホバーで少し浮くボタン
ホバーで上へ4px移動させ、同時に影を付けます。
Button2つ以上のプロパティを同時にアニメーションさせるにはtransitionの対象プロパティにallを指定することで、変化した全てのプロパティがアニメーション対象になります。
ホバーで少し浮くように見せるには、ボックスに影を付けると効果的です。
box-shadowプロパティを使用して、影の位置やぼかし具合を調整します。
box-shadow: (X方向の移動量) (Y方向の移動量) (ぼかしの大きさ) (影の色);
ホバーで矢印が動くボタン
ホバー時にボタン内の矢印が少し右に動きます。
Buttonbtn-arrowをホバーしたときに、その中のarrowを動かします。(ホバー判定箇所(.btn-arrow)と動かすもの(.arrow)が違うことに注意!)
連続アニメーション
animationプロパティを使って、ページ読み込み時に自動でアニメーションする要素を作ります。
ローディングアイコン
1秒1回転するローディングアイコンです。
左右に揺れるカード
0.4秒を1サイクルとして、右に5px、左に5pxでずっと揺れるカードです。
転がるミャクミャク
回転：1サイクル1秒、移動：1サイクル5秒として移動します。
