浮遊する雲のアニメーションを実現するCSS3

<ヘッド>
  <メタ文字セット='UTF-8'>
  <title>CSS3 クラウドアニメーション (Montana Flynn 著)</title>
</head>

<本文>
  <div class="sky">
    <div class="月"></div>
    <div class="clouds_two"></div>
    <div class="clouds_one"></div>
    <div class="clouds_three"></div>
  </div>
</本文>

html、本文{
  マージン: 0;
  高さ: 100%
}

。空 {
  高さ: 480ピクセル;
  背景: #007fd5;
  位置: 相対的;
  オーバーフロー: 非表示;
  -webkit-animation: sky_background 50s イーズアウト 無限;
  -moz-animation: sky_background 50s イーズアウト 無限;
  -o-animation: sky_background 50s イーズアウト 無限;
  -webkit-transform: translate3d(0, 0, 0);
  変換: translate3d(0, 0, 0);
  -o-変換: translate3d(0, 0, 0)
}

。月 {
  背景: url("http://i.imgur.com/wFXd68N.png");
  位置: 絶対;
  左: 0;
  高さ: 300%;
  幅: 300%;
  -webkit-animation: moon 50s linear infinite;
  -moz-animation: 月 50 秒 線形 無限;
  -o-アニメーション: 月 50 秒 線形 無限;
  -webkit-transform: translate3d(0, 0, 0);
  変換: translate3d(0, 0, 0);
  -o-変換: translate3d(0, 0, 0)
}

.clouds_one {
  背景: url("http://www.scri8e.com/stars/PNG_Clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgType=3&h1=50&w1=140");
  位置: 絶対;
  左: 0;
  上: 0;
  高さ: 100%;
  幅: 300%;
  -webkit-animation: cloud_one 50秒線形無限;
  -moz-animation: cloud_one 50秒線形無限;
  -o-animation: cloud_one 50秒線形無限;
  -webkit-transform: translate3d(0, 0, 0);
  変換: translate3d(0, 0, 0);
  -o-変換: translate3d(0, 0, 0)
}

.clouds_two {
  背景: url("http://freepngimages.com/wp-content/uploads/2016/02/clouds-transparent-background-2.png");
  位置: 絶対;
  左: 0;
  上: 0;
  高さ: 100%;
  幅: 300%;
  -webkit-animation: cloud_two 75秒線形無限;
  -moz-animation: cloud_two 75秒 線形無限;
  -o-animation: cloud_two 75秒 線形無限;
  -webkit-transform: translate3d(0, 0, 0);
  変換: translate3d(0, 0, 0);
  -o-変換: translate3d(0, 0, 0)
}

.clouds_three {
  背景: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
  位置: 絶対;
  左: 0;
  上: 0;
  高さ: 100%;
  幅: 300%;
  -webkit-animation: cloud_three 100s 線形無限;
  -moz-animation: cloud_three 100s 線形無限;
  -o-animation: cloud_three 100s 線形無限;
  -webkit-transform: translate3d(0, 0, 0);
  変換: translate3d(0, 0, 0);
  -o-変換: translate3d(0, 0, 0)
}

@-webkit-keyframes 空の背景 {
  0% {
    背景: #007fd5;
    色: #007fd5
  }
  50% {
    背景: #000;
    色: #a3d9ff
  }
  100% {
    背景: #007fd5;
    色: #007fd5
  }
}

@-webkit-keyframes 月 {
  0% {
    不透明度: 0;
    左: -200% -moz-transform: scale(0.5);
    -webkit-transform: スケール(0.5);
  }
  50% {
    不透明度: 1;
    -moz-transform: スケール(1);
    左: 0% 下: 250px;
    -webkit-transform: スケール(1);
  }
  100% {
    不透明度: 0;
    下部: 500px;
    -moz-transform: スケール(0.5);
    -webkit-transform: スケール(0.5);
  }
}

@-webkit-keyframes cloud_one {
  0% {
    残り: 0
  }
  100% {
    残り: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
    残り: 0
  }
  100% {
    残り: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
    残り: 0
  }
  100% {
    残り: -200%
  }
}

@-moz-keyframes 空の背景 {
  0% {
    背景: #007fd5;
    色: #007fd5
  }
  50% {
    背景: #000;
    色: #a3d9ff
  }
  100% {
    背景: #007fd5;
    色: #007fd5
  }
}

@-moz-keyframes 月 {
  0% {
    不透明度: 0;
    左: -200% -moz-transform: scale(0.5);
    -webkit-transform: スケール(0.5);
  }
  50% {
    不透明度: 1;
    -moz-transform: スケール(1);
    左: 0% 下: 250px;
    -webkit-transform: スケール(1);
  }
  100% {
    不透明度: 0;
    下部: 500px;
    -moz-transform: スケール(0.5);
    -webkit-transform: スケール(0.5);
  }
}

@-moz-keyframes cloud_one {
  0% {
    残り: 0
  }
  100% {
    残り: -200%
  }
}

@-moz-keyframes cloud_two {
  0% {
    残り: 0
  }
  100% {
    残り: -200%
  }
}

@-moz-keyframes cloud_three {
  0% {
    残り: 0
  }
  100% {
    残り: -200%
  }
}