CSS

【コピペ可】CSSのみで実現する繰り返し動く矢印アニメーションの作り方

  /

Web開発の世界では、ユーザーの注意を引くための方法としてアニメーションがよく用いられます。しかし、多くの場合、JavaScriptなどのプログラミング言語を駆使して複雑なアニメーションを作り出す必要があります。だけど、もしもっとシンプルで、しかもパフォーマンスに優れた方法があったらどうでしょう？
今回は、CSSのみを使用して矢印が繰り返し動く魅力的なアニメーションを作る方法をご紹介します。これはテキストへのアテンションを促すのに特に有効です。

Contents

CSSで矢印とその動きを定義する

このアニメーションを実現するには、CSSのanimationプロパティと@keyframesルールを使用します。
これにより、動きを持った矢印を表現することができます。以下のCSSコードは、その基本的な形を示しています。このコードは、必要に応じて自由にカスタマイズしてください。

<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で配置する

矢印のアニメーションをWebページに実装するには、次のHTMLマークアップを使用します。
これは、CSSで定義した.arrowクラスを持つ要素を示しています。この要素内に「ココに注目」というテキストを置き、ユーザーの注意を引きます。

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

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

このアニメーションの実際の動作を見るためには、以下のデモページをご覧ください。このデモを通じて、CSSのみで実現できるアニメーションの可能性を実感していただけると思います。

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

まとめ

JavaScriptを使用することなく、CSSだけで魅力的なアニメーションを作成する方法をご紹介しました。この技術を使えば、Webサイトやアプリケーションのユーザーインターフェースをより魅力的に、かつ効率的に改善することができます。特に、ユーザーの注意を引きたいテキストや要素がある場合、この矢印アニメーションは非常に有効です。ぜひこの方法を試してみて、あなたのWeb開発プロジェクトに革新をもたらしてください。

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

animation アニメーション
関連記事