HTML

コピペで簡単 CSS 背景画像をループアニメーションさせる方法

コピペで簡単 CSS 背景画像をループアニメーションさせる方法

コピペで簡単 CSS で背景画像をループアニメーションさせる方法を紹介します。
例えば、サイトのデザインに動きのアクセントを加えたいときに便利な方法です。

背景画像をループさせる方法

CSS で背景画像をループアニメーションさせるには、CSS プロパティの animation を使用します。
次のコードは、bodyに対して横100px高さ100pxの画像を、無限ループで右上から左下へ5秒かけてアニメーションさせる方法です。

body {
background: url("img/sample.gif");
-webkit-animation: bgiLoop 5s linear infinite;
animation: bgiLoop 5s linear infinite;
}
@-webkit-keyframes bgiLoop {
0% { background-position: 0 0;}
100% { background-position: -100px 200px;}
}
@keyframes bgiLoop {
0% { background-position: 0 0;}
100% { background-position: -100px 200px;}
}

表示速度を変更したい場合は 5s(五秒)の値を変更します。
動かす方向を変更したい場合は、keyframes の開始位置と終了位置の background-position の値を変更してください。
終了位置の指定は、最初に表示されている範囲外に画像を出すのがミソ。

まとめ

コピペで簡単 CSS で背景画像を無限ループでアニメーションさせる方法を紹介しました。

スポンサーリンク

合わせて読みたい関連記事