CSS アニメーションを使って背景画像をループで動かす

CSSで背景画像を動かすにはanimationを利用してbackground-poistionの位置を動かすシンプルな方法で実装できます。

See the Pen
Untitled
by kura (@kuranopen)
on CodePen.

CSS

CSSを背景に指定します。

body {
  background-image: url(https://source.unsplash.com/2s9aHF4eCjI/360x360); /* image url*/
  background-size: 360px 360px; /* image size */
  animation: bg 10s infinite linear;
}
@keyframes bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 360px -360px;
  }
}
  • background-imageに動かす画像のパス・URLを指定します
  • background-sizeと、animationbackground-positionに画像のサイズを指定すれば完成です
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。