概要
繰り返し表示した背景画像を斜めに動かすアニメーションの実装方法を紹介。用途・要件
- 背景画像を斜めに動かすアニメーションをCSSのみで実装。（animationを使用）
- 繰り返し表示用に調整した画像を使用する。（DEMOはドット画像を繰り返し表示）
- animationで無限ループさせている。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
注意事項
- background-positionは画像サイズに合わせて切りの良い値に設定すると元の位置に戻った際のブレが最小限になる。
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
