高さは任意の高さを設定してください。X軸方向の移動距離を変えることで横にスライドして流れるような動きを実現します。開始と終了地点の異なるアニメーションを2つ用意します。}}アニメーションを作成したら、動かしたい要素にアニメーションを指定します。作成した2種類のアニメーションをhtmlで読み込んだ画像それぞれに設定します。数値は任意で設定してください。infiniteを指定します。infinite;}【画像を2回読み込む理由】スタート地点の異なるアニメーションを2つ用意し、片方の画像にdelayを設定しましたが、2つの画像の動きを分けて図解してみます。画像1(緑)はX軸方向100%から-100%へ移動し100%に戻り再び-100%へ移動するという動きを繰り返し、画像2(黄)はX軸方向を0から-200%へ移動し、0に戻り再び-200%へ移動するという動きを繰り返します。これにより画像が途切れることなく横に流れているように見せています。ウィンドウサイズを変更した際に画像がウィンドウ幅より小さくなると、ループの繰り返しのなかで余白が生じるため、ウィンドウ幅いっぱいに表示する可変レイアウトの場合は対処が必要です。デモCSSアニメーションで作る無限ループアニメーションCSSアニメーションで作る無限ループアニメーション(複数要素)ギャラリーのように画像やリンク要素などひとつひとつが独立した要素を並べてループさせることも可能です。ここではリンク要素にもなっている画像+テキストの集まりをループさせてみます。ループさせたい要素群を2グループに分けます。以下では同じものを2回読み込んでいますが、要素のグループが2つあれば中身は同じでなくても構いません。</ul></div>CSSのアニメーションは最初の例と同じです。内の横並びなどのスタイルの設定の詳細は省きます。リンク要素を並べてループさせる場合、このままでは流しそうめんのようになってしまうので、クリックしやすいようにマウスをのせたときにアニメーションが一時停止するようにします。プロパティを使用します。時のプロパティに指定します。指定しまうと、マウスが乗っていないもう片方のグループは一時停止せず動き続けてしまうためです。paused;}デモCSSアニメーションで作る無限ループアニメーションTweenMaxで作る無限ループアニメーションアニメーションのライブラリ「TweenMax」を利用してループを作成します。ループさせたい画像を横に並べた1枚の画像を用意して、htmlで読み込みます。alt=""></div>後ほどJavaScriptで画像を複製して横に並べてループさせるので、CSSでは画像を囲む全体の幅と横並びの指定をします。基本的にはCSSアニメーションで作る場合と同じ設定で問題ありません。-1(繰り返し=無制限)を設定します。横に流れるアニメーション部分は、TweenMaxでX軸の移動を設定します。true/falseを使用すると、CSSと同様にマウスをのせた場合/はずれた場合でアニメーションの一時停止/再開を設定することもできます。