ふわふわ動く右矢印｜WordPress・SWELLでCSSアニメーションを実装する方法

Webサイトでは、ボタンやリンクなどにちょっとしたアニメーションを加えることで、ユーザーの視線を誘導したり、クリックできる要素であることを分かりやすくしたりできます。

今回は、CSSアニメーションを使って右矢印を左右にふわふわ動かす方法を紹介します。

WordPressのSWELLテーマにある「ボックスメニュー」を使用し、矢印アイコンだけをアニメーションさせる方法です。

CSSのanimationと@keyframesを使用するため、JavaScriptなどを使わずに実装できます。

また、今回紹介する方法は矢印だけではなく、ボタンや画像、アイコンなどにも応用できます。

完成形

まずは、今回実装するアニメーションの動きを確認します。

ボックスメニューに配置した右矢印が、左右にふわふわと動き続けます。

矢印そのものを大きく動かすのではなく、少しだけ位置を移動させることで、ユーザーに「こちらをクリックできます」という視覚的な誘導を加えています。

今回の矢印は、SWELLの「ボックスメニュー」にあるアイコンを利用しています。

そのため、SWELLを使用しているWordPressサイトであれば、ボックスメニューを作成したうえでCSSを追加するだけで実装できます。

SWELLのボックスメニューを用意する

まず、WordPressの編集画面からSWELLブロックの「ボックスメニュー」を配置します。

今回は、ボックスメニューのリンクボックスにある矢印アイコンをアニメーションさせます。

ボックスメニューを配置したら、アニメーションを適用したいボックスの「高度な設定」にある「追加CSSクラス」に、任意のクラス名を設定します。

今回は、

moving-arrow

というクラス名を使用します。

このクラスを設定することで、ページ内に複数のボックスメニューがあった場合でも、moving-arrowを指定したボックスだけにアニメーションを適用できます。

CSSで矢印をアニメーションさせる

次に、以下のCSSを追加します。

.moving-arrow .swell-block-box-menu__figure {
  animation: animationArrowRight 2s ease-in-out infinite;
}

@keyframes animationArrowRight {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20px);
  }
}

このコードによって、moving-arrowクラスが付いたボックスメニュー内の矢印が左右に動くようになります。

それでは、それぞれの記述について詳しく見ていきます。

アニメーションを適用する要素を指定する

まず、

.moving-arrow .swell-block-box-menu__figure {
  animation: animationArrowRight 2s ease-in-out infinite;
}

という記述があります。

ここでは、moving-arrowクラスの中にある.swell-block-box-menu__figureに対してアニメーションを適用しています。

SWELLのボックスメニューでは、矢印などのアイコン部分に.swell-block-box-menu__figureというクラスが使用されています。

そのため、

.moving-arrow .swell-block-box-menu__figure

と指定することで、ボックス全体ではなく、対象となるアイコン部分にアニメーションを適用できます。

例えば、

.moving-arrow {
  animation: animationArrowRight 2s ease-in-out infinite;
}

としてしまうと、矢印だけではなくmoving-arrowが付いているボックス自体が動いてしまいます。

今回の目的は「矢印だけを動かす」ことなので、矢印部分の要素を指定しています。

animationプロパティについて

次に、

animation: animationArrowRight 2s ease-in-out infinite;

について見ていきます。

animationは、CSSでアニメーションを設定するためのプロパティです。

今回の記述では、以下の内容をまとめて指定しています。

animation-name：animationArrowRight
animation-duration：2s
animation-timing-function：ease-in-out
animation-iteration-count：infinite

それぞれの役割を見ていきます。

animation-name

animation-name: animationArrowRight;

ここでは、後ほど@keyframesで作成するアニメーションの名前を指定しています。

今回の名前は、

animationArrowRight

としています。

この名前は任意で変更できますが、@keyframes側の名前と一致させる必要があります。

animation-duration

animation-duration: 2s;

アニメーション1回分にかかる時間を指定しています。

今回の場合は2秒です。

例えば、

animation-duration: 1s;

にすると動きが速くなり、

animation-duration: 4s;

にするとゆっくりした動きになります。

animation-timing-function

animation-timing-function: ease-in-out;

は、アニメーションの速度変化を指定しています。

ease-in-outでは、アニメーションの開始時と終了時がゆっくりになり、途中で速度が上がるような動きになります。

今回のように、矢印を「ふわふわ」と動かしたい場合に使いやすい設定です。

animation-iteration-count

animation-iteration-count: infinite;

は、アニメーションを繰り返す回数を指定します。

infiniteにすることで、アニメーションを無限に繰り返します。

そのため、ページを表示している間、矢印が動き続けます。

@keyframesで動きを指定する

次に、実際にどのような動きをさせるのかを指定します。

@keyframes animationArrowRight {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20px);
  }
}

@keyframesは、CSSアニメーションの「開始から終了までの動き」を定義するために使用します。

今回の場合は、

0% → 元の位置
50% → 左へ20px移動
100% → 元の位置

という動きになっています。

つまり、

元の位置
   ↓
左へ20px
   ↓
元の位置
   ↓
左へ20px
   ↓
元の位置

という動きを繰り返すことで、矢印がふわふわと動いているように見えます。

transform: translateX()について

アニメーションの移動には、

transform: translateX();

を使用しています。

translateX()は、要素を水平方向に移動させるCSSです。

例えば、

transform: translateX(-20px);

とすると、要素が左方向へ20px移動します。

反対に、

transform: translateX(20px);

とすると、右方向へ20px移動します。

今回のコードでは、

transform: translateX(0);

で元の位置に戻し、

transform: translateX(-20px);

で左へ20px移動させています。

移動距離を小さくしたい場合は、

transform: translateX(-10px);

のように変更できます。

反対に、もっと大きく動かしたい場合は、

transform: translateX(-30px);

のように調整できます。

動く方向を変更する

今回のコードでは、矢印を左方向へ20px移動させています。

もし右方向へ動かしたい場合は、

@keyframes animationArrowRight {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(20px);
  }
}

とします。

translateX()の値をマイナスにすると左方向、プラスにすると右方向へ移動します。

そのため、サイトのデザインに合わせて簡単に動く方向を変更できます。

アニメーションの速度を調整する

動きが速すぎる、または遅すぎる場合は、

animation: animationArrowRight 2s ease-in-out infinite;

の2sを変更します。

例えば、

animation: animationArrowRight 1s ease-in-out infinite;

とすると、1秒で1回のアニメーションになります。

ゆっくり動かしたい場合は、

animation: animationArrowRight 3s ease-in-out infinite;

のようにします。

サイトの雰囲気に合わせて調整するとよいでしょう。

矢印以外にも応用できる

今回のコードでは右矢印を動かしていますが、CSSアニメーション自体はさまざまな要素に応用できます。

例えば、

• ボタン
• アイコン
• 画像
• バナー
• テキスト
• 矢印
• CTA周辺の装飾

などにも利用できます。

@keyframesで動きを定義しておけば、対象となる要素を変更するだけで同じアニメーションを利用できます。

アニメーションを使いすぎないことも重要

CSSアニメーションはWebサイトに動きを加えられる便利な機能ですが、ページ内のさまざまな要素を常に動かしてしまうと、かえってユーザーにとって見づらいページになる場合があります。

特に、

• ボタン
• CTA
• ナビゲーション
• 重要なリンク

など、ユーザーに注目してほしい場所に絞って使用するのがおすすめです。

今回のように矢印を少しだけ動かすことで、「この先にリンクがあります」という視覚的な誘導として活用できます。

まとめ

今回は、WordPressのSWELLで作成したボックスメニューの右矢印を、CSSアニメーションでふわふわと動かす方法を紹介しました。

使用するコードは以下のとおりです。

.moving-arrow .swell-block-box-menu__figure {
  animation: animationArrowRight 2s ease-in-out infinite;
}

@keyframes animationArrowRight {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20px);
  }
}

ポイントは、animationでアニメーションの名前や速度、繰り返し回数などを指定し、@keyframesで具体的な動きを定義することです。

今回の例では矢印を左方向へ20px移動させていますが、translateX()の数値を変更することで移動距離や方向を調整できます。

また、矢印だけではなく、画像やアイコン、ボタンなどにも応用できます。

WordPressやSWELLで「この部分だけ動かしたい」「ボタンにちょっとしたアニメーションを追加したい」といった場合には、CSSのanimationと@keyframesを利用することで、JavaScriptを使わずに実装できる場合があります。

ホームページのCSSアニメーションの実装や、SWELLでのデザイン調整、既存サイトの表示・動作の修正なども対応しています。

365日対応・8:00〜23:00対応・最短即日対応で、原因が分からないホームページの不具合から、ちょっとしたCSS・JavaScriptの修正まで対応しています。