CSSを使ってマウスオーバーしたときにボタンがぷるぷるっと動くエフェクトの作り方を紹介します。ちょっとしたアニメーションを加えるだけで、とても簡単に実装することができます。

アニメーションの作り方

まずは、正円のボタンを作成します。border-radiusプロパティを使って正円をつくることができます。

button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

今度は、マウスオーバーしたときのエフェクトをつけていきます。

button:hover {
  animation: hoverShake 0.15s linear 3;
  opacity: 0.8;
}

@keyframes hoverShake {
  0% {transform: skew(0deg,0deg);}
  25% {transform: skew(1deg, 1deg);}
  75% {transform: skew(-1deg, -1deg);}
  100% {transform: skew(0deg,0deg);}
}

マウスオーバー時のアニメーション設定としては、0.15秒のアニメーションを一定の速度で3回繰り返すという指定をしています。そして、keyframesでどのように変化させていくか指定をしています。ここでは、transformプロパティの「skew」を使って1度の傾斜をつけています。これにより、マウスオーバーしたときにぷるぷるした動きを出すことができます。

Button

以上が、CSSアニメーションを使ってボタンをぷるぷるさせるエフェクトの作り方となります。

その他の記事