WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

1枚の画像で雲を左から右へ無限に流れるアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>雲が左から右に無限に流れるアニメーション</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="bg_cloud" id="bg"><img src="img/bg.jpg" alt=""></div>
  <div class="cloud" id="bg"></div>
</body>
</html>
@charset "utf-8";

html,body,div,img {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

.bg_cloud {
  position: fixed;
  top: 0;
  height: 0;
  width: 100%;
  height: 100%;
}

.bg_cloud img {
  width: 100%;
}

.cloud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background: url("../img/image.png") repeat-x left top;
  background-size: cover;
  -webkit-animation: cloud_anime 100s linear infinite;
  -moz-animation: cloud_anime 100s linear infinite;
  animation: cloud_anime 100s linear infinite;
}

.cloud img {
  width: 100%;
}

@-webkit-keyframes cloud_anime {
  0% { background-position: 0 0; }

  100% { background-position: 2000px 0; }
}
@-moz-keyframes cloud_anime {
  0% { background-position: 0 0; }

  100% { background-position: 2000px 0; }
}


「background」に雲の画像を置く
repeat-xにしておき、CSS3のアニメーションで
bacgroud-positionを変更し横に動いているように見せる

リピートした時に画像の端が分からないように雲の画像を作る。