🍃
【ライブラリ】Hover.cssの使い方
Hover.cssとは
CSSのアニメーションライブラリです。
サイトにはたくさんのアニメーションデモが並んでいます。
マウスをホバーすると、アニメーションを確認できます。
いつ使うの？
- アニメーションを簡単に実装したいとき
- デザイナーがコーダーへアニメーションの指示をするとき
上記2つが使いどころかと思います。
使い方
トップページ＞Download on GitHub＞Download Zipから一式ダウンロードできます。
使いたいアニメーションを選ぶ
アニメーションデモの中から、サイトで使用したいアニメーションを探します。
今回はWobble Verticalを使用してみましょう。
ダウンロードしたファイルのCSS＞hover.cssを開き、Wobble Verticalを検索します。
511行目に見つけました。
該当のCSSをコピーして、読み込みに使用しているCSSに貼り付けます。
codepenのHTMLを確認してください、hvr-wobble-verticalclassをa要素につけています。
まとめ
Hover.cssはCDN不要でとても簡単に使用できます。
今回はアニメーションをつけたい部分が少なかったのでCSSをコピーして作りましたが、もっとたくさんのアニメーションをつけたい場合はHover.cssをHTMLから読み込むのがおすすめです。
Discussion