ふわふわ動く右矢印【WordPress】cssアニメーション/キーフレーム

2024年8月11日

本記事では、右矢印をふわふわ動かしてアニメーションさせたい時の方法について紹介していきます。

今回は矢印を動かしていますが、その他にも色々と応用ができるため好きなようにアレンジを加えて頂ければと思ってます！

ふわふわ動く右矢印

まずは完成形を紹介していきます。
下記のようにボックスメニューの矢印アイコンがふわふわ動いてることが分かります。

今回実装している矢印のアニメーションの元の素材は、SWELLテーマの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);
  }
}

このコードは、矢印や他の要素を左右にスムーズに移動させるCSSアニメーションを作成するためのものです。以下に、各部分の詳細な説明を行います。

クラスmoving-arrow　は、ボックスメニュー ⇒ リンクボックス の高度な設定内にある追加CSSクラスに追加しています。

1. アニメーションの適用

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

a. セレクタ

.moving-arrow .swell-block-box-menu__figure は、.moving-arrow クラスの中にある .swell-block-box-menu__figure クラスを持つ要素にスタイルを適用しています。
- 例えば、.moving-arrow は親要素、.swell-block-box-menu__figure はその中の子要素を指します。

もし、.moving-arrow {・・・}　このようにクラスを指定すると、矢印だけでなくボックスごとふわふわ動きます。

b. アニメーションプロパティ

animation: animationArrowRight 2s ease-in-out infinite; では、以下のプロパティを指定しています：
- animation-name: animationArrowRight という名前のアニメーションを適用します。
- animation-duration: 2s で、アニメーションの1サイクルが2秒かかるように設定します。
- animation-timing-function: ease-in-out は、アニメーションの速度をゆっくり始まり、途中で速くなり、最後に再びゆっくりにするタイミング関数です。
- animation-iteration-count: infinite で、アニメーションを無限に繰り返します。

2. アニメーションの定義

@keyframes animationArrowRight {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
}

a. `@keyframes` ルール

@keyframes animationArrowRight は、animationArrowRight という名前のアニメーションの動作を定義します。このアニメーションは、時間の経過に応じて要素のスタイルを変更します。

b. アニメーションのステップ

0% と 100%: アニメーションの最初と最後の時点（開始時と終了時）で、要素は元の位置に留まります。transform: translateX(0); により、要素は水平方向に移動せず、元の位置にあります。
50%: アニメーションの途中、つまり50%の時点で、要素は translateX(-20px) で左に20ピクセル移動します。

3. アニメーションの動作

このアニメーションは、2秒間で要素を左に20ピクセル動かし、その後元の位置に戻すという動作を繰り返します。
ease-in-out の効果により、アニメーションは開始と終了がゆっくりで、真ん中が速くなるようなスムーズな動きになります。
infinite の設定により、このアニメーションは無限に繰り返されます。

まとめ

このコードは、要素（例えば矢印）が左右に滑らかに動くアニメーションを作成します。要素は左に少し移動してから元に戻るという動作を2秒ごとに繰り返し、視覚的な動きが加えられます。このようなアニメーションは、インタラクティブなユーザーインターフェースや視覚的な誘導（例えば、ボタンやリンクへの注意を引くため）に使われることが多いです。