2019/8/28サイトに何か動きを取り入れたい場合に、マウスオーバー時のボタンやスクロール時に見出しがフェードインするなど、ユーザーの操作に伴うアニメーション以外に、画面上で常に動きのある要素を取り入れると訪問者に違った印象を与えられるかもしれません。本記事では一列に並んだ要素が右から左あるいは上から下など、画面の端から端へ流れるように動く無限ループアニメーションを4パターン作成します。写真は途切れることなく無限にループします。記事内のコード、デモサイトはいずれも右から左へ動きます。ベンダープレフィックスは省略しています。プロパティでアニメーションの名前やタイミングなどを指定します。指定できるプロパティは以下になります。アニメーションの進め方。一時停止や再開など上記のプロパティは一括で指定することができます。以下はプロパティ一括指定の一例です。%で指定する場合必ずしも0から100までを記述する必要はありません。最初は非表示になっている要素が徐々に表示されるアニメーションの例です。アニメーションの使用をご覧ください。CSSアニメーションで作る無限ループアニメーションCSSアニメーションを利用する無限ループでは、動かしたい要素は一列に並べた横長(あるいは縦長)の1枚の画像にします。用意した画像をhtmlで2回続けて読み込みます。