スニペットを使ってホバーアニメーションを付ける

webサイト制作

最近はcss3のアニメーションだけで色々な事が出来るようになっています。特にホバー時のように小さいアニメーション(マイクロインタラクション)であればcssのみで充分表現できます。
とは言え、css3のアニメーションをゼロからスクラッチで書いていくのは少し敷居が高く時間も掛かってしまう為、スニペットを有効的に使いましょう。

ianlunn.github.io

使い方は簡単で、a要素に自身の取り入れたいホバーアニメーションのクラス名を入れます。それに対するcss部分を「hover.css」からコピーしてきましょう。

<a href="#" class="hvr-buzz-out">ボタン</a>

Animate.css

daneden.github.io

webdesign-trends.net

liskul.com

コメント

タイトルとURLをコピーしました