Mit CSS3 können Sie eine schwebende Wolkenanimation erzielen

<Kopf>
  <meta charset='UTF-8'>
  <title>CSS3-Wolkenanimationen von Montana Flynn</title>
</Kopf>

<Text>
  <div Klasse="Himmel">
    <div Klasse="Mond"></div>
    <div Klasse="clouds_two"></div>
    <div Klasse="clouds_one"></div>
    <div Klasse="clouds_three"></div>
  </div>
</body>

html, Text {
  Rand: 0;
  Höhe: 100%
}

.Himmel {
  Höhe: 480px;
  Hintergrund: #007fd5;
  Position: relativ;
  Überlauf: versteckt;
  -webkit-animation: sky_background 50s ease-out unendlich;
  -moz-animation: Himmelshintergrund, 50 s, unendliches Auslaufen;
  -o-Animation: Himmelshintergrund, 50 s, unendliches Auslaufen;
  -webkit-transform: übersetzen3d(0, 0, 0);
  -moz-transform: übersetzen3d(0, 0, 0);
  -o-transform: übersetzen3d(0, 0, 0)
}

.Mond {
  Hintergrund: URL("http://i.imgur.com/wFXd68N.png");
  Position: absolut;
  links: 0;
  Höhe: 300%;
  Breite: 300%;
  -Webkit-Animation: Mond 50er Jahre linear unendlich;
  -moz-animation: Mond 50er linear unendlich;
  -o-Animation: Mond 50er Jahre linear unendlich;
  -webkit-transform: übersetzen3d(0, 0, 0);
  -moz-transform: übersetzen3d(0, 0, 0);
  -o-transform: übersetzen3d(0, 0, 0)
}

.clouds_one {
  Hintergrund: URL("http://www.scri8e.com/stars/PNG_Clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgType=3&h1=50&w1=140");
  Position: absolut;
  links: 0;
  oben: 0;
  Höhe: 100%;
  Breite: 300%;
  -webkit-animation: cloud_one 50s linear unendlich;
  -moz-animation: cloud_one 50s linear unendlich;
  -o-Animation: Wolke_eine 50 s linear unendlich;
  -webkit-transform: übersetzen3d(0, 0, 0);
  -moz-transform: übersetzen3d(0, 0, 0);
  -o-transform: übersetzen3d(0, 0, 0)
}

.wolken_zwei {
  Hintergrund: URL("http://freepngimages.com/wp-content/uploads/2016/02/clouds-transparent-background-2.png");
  Position: absolut;
  links: 0;
  oben: 0;
  Höhe: 100%;
  Breite: 300%;
  -webkit-animation: cloud_two 75s linear unendlich;
  -moz-animation: cloud_two 75s linear unendlich;
  -o-Animation: Wolke_zwei, 75 s, linear, unendlich;
  -webkit-transform: übersetzen3d(0, 0, 0);
  -moz-transform: übersetzen3d(0, 0, 0);
  -o-transform: übersetzen3d(0, 0, 0)
}

.wolken_drei {
  Hintergrund: URL("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
  Position: absolut;
  links: 0;
  oben: 0;
  Höhe: 100%;
  Breite: 300%;
  -webkit-animation: cloud_three 100s linear unendlich;
  -moz-animation: cloud_three 100s linear unendlich;
  -o-Animation: Wolke_drei, 100 s, linear, unendlich;
  -webkit-transform: übersetzen3d(0, 0, 0);
  -moz-transform: übersetzen3d(0, 0, 0);
  -o-transform: übersetzen3d(0, 0, 0)
}

@-webkit-keyframes Himmelshintergrund {
  0% {
    Hintergrund: #007fd5;
    Farbe: #007fd5
  }
  50 % {
    Hintergrund: #000;
    Farbe: #a3d9ff
  }
  100 % {
    Hintergrund: #007fd5;
    Farbe: #007fd5
  }
}

@-webkit-keyframes Mond {
  0% {
    Deckkraft: 0;
    links: -200 % -moz-transform: Maßstab (0,5);
    -webkit-transform: Maßstab(0,5);
  }
  50 % {
    Deckkraft: 1;
    -moz-transform: Skalierung(1);
    links: 0 % unten: 250px;
    -webkit-transform: Skalierung(1);
  }
  100 % {
    Deckkraft: 0;
    unten: 500px;
    -moz-transform: Skala (0,5);
    -webkit-transform: Maßstab(0,5);
  }
}

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

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

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

@-moz-keyframes Himmelshintergrund {
  0% {
    Hintergrund: #007fd5;
    Farbe: #007fd5
  }
  50 % {
    Hintergrund: #000;
    Farbe: #a3d9ff
  }
  100 % {
    Hintergrund: #007fd5;
    Farbe: #007fd5
  }
}

@-moz-keyframes Mond {
  0% {
    Deckkraft: 0;
    links: -200 % -moz-transform: Maßstab (0,5);
    -webkit-transform: Maßstab(0,5);
  }
  50 % {
    Deckkraft: 1;
    -moz-transform: Skalierung(1);
    links: 0 % unten: 250px;
    -webkit-transform: Skalierung(1);
  }
  100 % {
    Deckkraft: 0;
    unten: 500px;
    -moz-transform: Skala (0,5);
    -webkit-transform: Maßstab(0,5);
  }
}

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

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

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