【コピペ可】CSSだけで矢印が繰返し動くアニメーション

JavaScriptを使用せず、CSSだけで矢印が繰返し動くアニメーション作る方法をご紹介します。
テキストのアテンションに使えます。

矢印と動きをCSSで記述

※CSSの「animation」と「keyframes」を使って矢印を動かしてます。必要に応じて書き換えてください。

<style>
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  font-size: 16px;
}
h1{
  font-size:18px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
}
.arrow {
  position: relative;
  width: 100px;
  margin: 0 auto;
}
.arrow::before {
  animation: arrow 2.5s infinite;
  border: solid #FF0000;
  border-width: 0 0 2px 2px;
  content: "";
  margin: auto;
  position: absolute;
  top: -64px;
  left: 25px;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
.att{
  font-size:16px;
  font-weight:bold;
  color: #FF0000;
}
@keyframes arrow {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  60% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 60%, 100% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}
</style>

矢印のHTML記述

<div class="arrow">
  <span class="att">ココに注目</span>
</div>

矢印が繰返し動くCSSアニメーションデモページ

矢印が繰返し動くCSSアニメーションデモ

　

※流用される場合は自己責任でお願いします。
　タグ内のGoogleアナリティクスタグは流用しないで下さい。

ディスプレイ広告

ディスプレイ広告