どうも、バナナです。

コロナが増えてきてまた外出できなくなると気が重くなります…。
家にいながらできる趣味を始めたいなと思う今日このごろです。

今日は、キービジュアルとかで使えそうなCSSのアニメーションを紹介します。

デモ

言葉だけだと伝わらないと思うので、まずはデモをご確認いただければと思います。

デモはこちら

 

 

左下のテキストがクルクル回っているアニメーションのご紹介です。

HTML

HTMLはアニメーション部分の最低限の記述になっています。

<div class="keyvisual">
  <div class="keyvisual__scroll">
    <img src="./images/keyvisual_scroll.svg" alt="" class="keyvisual__scroll--circle">
    <img src="./images/keyvisual_arrow.svg" alt="" class="keyvisual__scroll--arrow">
  </div>
</div>

CSS

CSSも最低限の記述になっています。

.keyvisual{
  position: relative;
}

.keyvisual__scroll{
  width: 8vw;
  position: absolute;
  bottom: 2vw;
  left: 2vw;
}

.keyvisual__scroll--circle{
  height: auto;
  width: 100%;
  animation: rotate 15s linear infinite;
}

.keyvisual__scroll--arrow{
  height: auto;
  width: 2vw;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

まとめ

キービジュアルとかで使えそうなCSSのアニメーションのご紹介でした。

簡単に実装できるわりには、ちょっとオシャレな雰囲気が出せますよね。
使用する機会があれば使ってみてください！

ちょっとお仕事で使うことがあったのでご紹介でした。

では、今回はこの辺で。
またね。