マウスオーバーした時にアニメーションを付ける

指定した要素をマウスオーバー（ホバー）した時にアニメーションを付ける。

デモページを表示

CSS

補足

• マウスオーバー（ホバー）した時に設定するアニメーションのクラス（ bounce, rubberBand, tada ）を用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• マウスオーバー（ホバー）した時に data-hover-animation 属性に設定したアニメーションのクラスを追加し、マウスアウトしたら追加されたアニメーションのクラスを削除する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• マウスオーバー（ホバー）した時のアニメーションを data-hover-animation 属性に指定する。

関連投稿

• スクロール時に指定した要素をアニメーション付きで表示
• ボタンをクリックした時にアニメーションを付ける