Wix Studio エディタ:ループアニメーションを追加する
読了時間:4分
連続的にループするアニメーションを使用して、デザインに躍動感を与えましょう。訪問者に注目してもらいたいどの要素にもループアニメーションを追加することができます。

この記事では、以下の項目について説明します:
ヒント:
デスクトップブレイクポイントにアニメーションを追加すると、小さいブレイクポイントにも適用されます。ただし、ブレイクポイントごとに異なるアニメーションを設定したり、同じアニメーションをカスタマイズしたりすることは可能です。
ループアニメーションを追加する
ループアニメーションは特定の要素やセクション、またはサイトページ全体に追加することができます。
ループアニメーションを追加する方法:
- 該当する要素またはセクションを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 「ループ」下の「+追加」をクリックします。
- リストからアニメーションを選択します。
ヒント:アニメーションにマウスオーバーすると、アニメーションのプレビューが表示されます。

ループアニメーションをカスタマイズする
アニメーションを選択したら、希望通りの動作になるように設定します。アニメーションの所要時間を選択したり、強度を設定したり、リピート間の遅延時間を追加したりできます。
ループアニメーションをカスタマイズする方法:
- 該当する要素、セクション、またはページを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 変更したいアニメーションをクリックします。
- 「アニメーションを調整」をクリックして設定を変更します:
- 方向:アニメーションの方向を選択します(例:横、縦)。
- 強度:アニメーションの強弱を調整します。
- 所要時間:アニメーションの所要時間を変更します。
- リピート遅延時間:アニメーションの無限リピートの間に遅延時間(秒単位)を追加します。
- イージング:アニメーションがどの程度徐々にイーズイン・イーズアウトするかを選択します。
注意:
利用可能な設定は、選択したアニメーションによって異なります。

ループアニメーションを削除する
ループアニメーションは要素設定パネルからいつでも削除できます。
ループアニメーションを削除する方法:
- 該当する要素、セクション、またはページを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 該当するアニメーションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「削除」をクリックします。
