こんにちは！Web制作エンジニアのモリヤス（@_moriyas）です。
みなさん！Webサイトを作るとき、どんなホバーアニメーション使ってますか？
例えば、メニューやボタンは、ホバーした時にシンプルに透明にしますよね。
“Simple” is best.
透明にする。だけでも、まぁ問題ない気はしますね！
ただ、Webサイトを見ていただけた方をちょっと「キュン」とさせたいと思いません？？思いますよね！人間だもの、思って当然！！！
ということで、本日は、僕てき「キュンです」なホバーアニメーションのご紹介をします。
※あくまで僕個人の偏った見解です。(みなさんの好きなアニメーションあったら教えてください！）
どんなアニメーションなの？
今回ご紹介するホバーアニメーションは、僕のポートフォリオサイトのheaderメニューとfooterメニュー（SNSのリンク）のhover時に取り入れているアニメーションです。
See the Pen by モリヤス (@moriyas) on CodePen.
どうですか？
ホバーされると、線が引かれるアニメーションはよく見かけますが、「ウーウィン」って線が現れて、「ウーウィン」って線が消える感じ！ ちょっとタメがある感じわかりますかね？
「キュン」ってしません？(￣∀￣)
この「ウーウィン」を表現しているのは「transition: transform 0.45s cubic-bezier(1, 0, 0, 1);」
cubic-bezier()を使ったことあるでしょうか？
「変化の度合いを3次ベジェ曲線で指定します。」というものです。３次べジュ曲線？なんだそれは？
「中学生でもわかるベジェ曲線」という記事がわかりやすいです。
transitionプロパティよく指定する「ease」とか「ease-in-out」とか
これは実はそれぞれ「cubic-bezier(0.25, 0.1, 0.25, 1.0)」、「cubic-bezier(0.42, 0, 0.58, 1.0)」が指定されたものだそうです。
cubic-bezierを使いこなせるようになると、自在にアニメーションを表現できるようになりますね！
他に指定できるものと比較してみると下記な感じ。
See the Pen hover animation compare by モリヤス (@moriyas) on CodePen.
ちなみにこちらのサイトでcubic-bezierの値を指定して、どのような動きになるか確認できます！（いまいち使い方は分かっていない…）
終わりに
いかがだったでしょうか？
今回紹介したアニメーションのようにcubic-bezier()を自分で指定したアニメーションを使うことは中々ないと思いますが、このような方法を覚えておくと細かい部分で他のサイトと違いを出せると思います！
色々試してみて、自分のお気に入りの「キュン」な動きを見つけてみてはいかがでしょうか？d(￣ ￣)
