【Animate.css】マウスホバーでアニメーションさせる方法

2019年6月12日Animate.css,CSSライブラリ,CSS,CSSアニメーション

「Animate.css」のアニメーションをマウスホバー（マウスオーバー）で開始させるサンプルコードです

動作サンプル

See the Pen Mouse Hover Ivent（CSS Only） by yochans (@yochans) on CodePen.

サンプルコードと説明

JavaScriptを使わずにCSSのみで実装が可能です

「Animate.css」はclassでアニメーションを定義しますが、対応するanimation-nameは同名のアニメーションフレーム名で記述されています

classには「animated」だけ付けておいて、マウスホバー時にanimation-nameを指定すればマウスホバー時のみのアニメーションが可能になります

html

<div><p class="animated">BOUNCE</p></div>

CSS

div{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:50px 0;
}

.animated{
  width:120px;
  padding: 6px;
  background-color: #01579B;
  color:#FFF;
}

.animated:hover{
animation: bounce 1s infinite;
}

また、「animation-play-state」で通常時は「paused」ホバー時に「running」とすることでも実装できますが、マウスカーソルが離れた時に途中で停止した状態になるので、そのあたりの対策をしないと微妙です

2019年6月12日Animate.css,CSSライブラリ,CSS,CSSアニメーション

Posted by Yousuke.U