クリックやマウスオーバーをしてもらいたい場合にちょっとしたアニメーションをつけるだけでそれらを促す補助的な役割をすることができます。例えば、ツールチップなどを使って補足情報を表示させたい場合にアニメーションがついていればマウスオーバーの促進にもなります。

アニメーションの作り方

今回は、アイコンにちょっとしたアニメーションをつけて注目させる方法を見ていきます。

.attention {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: #258e0e;
  border-radius: 100%;
  cursor: pointer;
}
.attention::before {
  position: absolute;
  display: inline-block;
  top: -1px;
  left: -1px;
  width: 25px;
  height: 25px;
  content: "";
  border: 1px solid #258e0e;
  border-radius: 100%;
  animation: circleBorder 1.5s infinite;
}
.attention::after {
  position:absolute;
  display: inline-block;
  width: 0;
  height: 0;
  content: "";
  left:10px;
  top:8px;
  border: 5px solid transparent;
  border-left-color: #fff;
}

上記のCSSの指定は、サークルの中に三角形を描画した単純なアイコンを作る指定なので、ここは何でも構いません。
実際にアニメーションさせるのは次の「@keyframes」の部分になります。

@keyframes circleBorder {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5, 1.5);
  }
}

動きとしては、「circleBorder」というキーフレーム名がついた要素を不透明度を変えながら拡大させるというアニメーションをつけています。ここでは、「::before」疑似要素にキーフレーム名を設定したので、円状のボーダーが1.5秒かけて1.5倍に拡大されるような動きをします。「infinite」は無限にアニメーションさせる指定になります。

このようにちょっとしたアニメーションをつけるだけでユーザーの目を惹かせることができたりします。

以上が、CSSを使ってクリックやマウスオーバーを促すアニメーションの作り方となります。

その他の記事