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 の値を変更してください。
綺麗なループアニメーションにする場合は、
初期位置から画像のサイズ分、範囲外に画像を移動させるのがコツです。
違う動きのアニメーションを複数設置する場合は、キーフレーム名(例:bgiLoop)を変更してください。

まとめ

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

この記事をシェアする