Wettersymbol-Animationseffekt implementiert durch CSS3

<div Klasse="Wrapper">
  <div Klasse="Sonne"></div>
  <div Klasse="Wolke">
    <div Klasse="Wolke1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div Klasse="Cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div Klasse="Cloud_s">
    <div Klasse="Wolke1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div Klasse="Cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div Klasse="Cloud_vs">
    <div Klasse="Wolke1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div Klasse="Cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div Klasse="Dunst"></div>
  <div Klasse="Haze_Stripe"></div>
  <div Klasse="Haze_Stripe"></div>
  <div Klasse="Haze_Stripe"></div>
  <div Klasse="Donner"></div>
  <div Klasse="Regen">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div Klasse="Schneeregen">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div Klasse="Text">
    <ul>
      <li>Überwiegend sonnig</li>
      <li>Teilweise sonnig</li>
      <li>Teilweise bewölkt</li>
      <li>Überwiegend bewölkt</li>
      <li>Bewölkt</li>
      <li>Dunstig</li>
      <li>Gewitter</li>
      <li>Regen</li>
      <li>Schneeregen</li>
    </ul>
  </div>
</div>

@import-URL (https://fonts.googleapis.com/css?family=Raleway+Dots);

Körper{
  Rand: 0;
  Polsterung: 0;
  Hintergrund: #33495f;
}

.Verpackung{
  Breite: 150px;
  Höhe: 150px;
  Position: absolut;
  oben: berechnet (50 % – 75 Pixel);
  links: berechnet (50 % – 75 Pixel);
}

.Sonne{
  Position: absolut;
  unten: 0px;
  rechts: 0px;
  Breite: 85px;
  Höhe: 85px;
  Hintergrund: #f9db62;
  Rahmenradius: 360px;
  Deckkraft: 1;
  Animation: Sonne 10s 0s linear unendlich;
}

.Wolke{
  Position: absolut;
  unten: 12px;
  links: 8px;
  Z-Index: 2;
  Deckkraft: 0;
  Animation: Wolke 10s 0s linear unendlich;
}

.cloud .cloud1:nicht(.c_shadow) ul li{
  Animation: Wolke 10 s 0,1 s linear unendlich;
}

.cloud .cloud1:nicht(.c_shadow):vor{
  Animation: Wolke 10 s 0 s linear unendlich;
}

.cloud_s{
  Position: absolut;
  unten: 70px;
  links: 150px;
  Transformieren: Skalierung (0,7; 0,7) Matrix (-1, 0, 0, 1, 0, 0);
  Z-Index: 1;
  Deckkraft: 0;
  Animation: Wolke_s 10s 0s linear unendlich;
}

.cloud_s .c_shadow{
  transformieren: Skalierung(1,02,1,02);
}

.cloud_vs{
  Position: absolut;
  unten: 90px;
  links: 30px;
  transformieren: Skalierung (0,5,0,5);
  Z-Index: 0;
  Deckkraft: 0;
  Animation: cloud_vs 10s 0s linear unendlich;
}

.c_shadow{
  z-Index: 4 !wichtig;
  links: -5px;
  unten: -3px !wichtig;
}

.c_shadow:vor{
  Hintergrund: #33495f !wichtig;
}

.c_shadow ul li{
  Breite: 60px !wichtig;
  Höhe: 60px !wichtig;
  Hintergrund: #33495f !wichtig;
  schweben: links;
  Position: absolut;
  unten: -2px !wichtig;
  Rahmenradius: 360px;
}

.c_shadow ul li:nth-child(2){
  Breite: 80px !wichtig;
  Höhe: 80px !wichtig;
  Hintergrund: #33495f !wichtig;
  schweben: links;
  Rahmenradius: 360px;
  Position: absolut;
  unten: 16px !wichtig;
  links: 25px !wichtig;
}

.c_shadow ul li:nth-child(3){
  Breite: 70px !wichtig;
  Höhe: 70px !wichtig;
  Hintergrund: #33495f !wichtig;
  schweben: links;
  Rahmenradius: 360px;
  Position: absolut;
  unten: 6px !wichtig;
  links: 60px !wichtig;
}

.c_shadow ul li:letztes-Kind{
  Breite: 60px !wichtig;
  Höhe: 60px !wichtig;
  Hintergrund: #33495f !wichtig;
  schweben: links;
  Rahmenradius: 360px;
  Position: absolut;
  unten: 0px;
  links: 90px;
}


.cloud1{
  Position: absolut;
  unten: 0px;
  Z-Index: 5;
}

.cloud1:vor{
  Inhalt: '';
  Position: absolut;
  unten: 0px;
  links: 28px;
  Breite: 90px;
  Höhe: 20px;
  Hintergrund: #fff;
}

.cloud1 ul{
  Listenstil: keiner;
  Rand: 0;
  Polsterung: 0;
}

.cloud1 ul li{
  Breite: 50px;
  Höhe: 50px;
  Hintergrund: #fff;
  schweben: links;
  Rahmenradius: 360px;
}

.cloud1 ul li:nth-child(2){
  Breite: 70px;
  Höhe: 70px;
  Hintergrund: #fff;
  schweben: links;
  Rahmenradius: 360px;
  Position: absolut;
  unten: 18px;
  links: 25px;
}

.cloud1 ul li:nth-child(3){
  Breite: 60px;
  Höhe: 60px;
  Hintergrund: #fff;
  schweben: links;
  Rahmenradius: 360px;
  Position: absolut;
  unten: 8px;
  links: 60px;
}

.cloud1 ul li:letztes-Kind{
  Breite: 50px;
  Höhe: 50px;
  Hintergrund: #fff;
  schweben: links;
  Rahmenradius: 360px;
  Position: absolut;
  unten: 0px;
  links: 90px;
}

.Dunst{
  Hintergrund: #33495f;
  Position: absolut;
  unten: 50px;
  links: 0px;
  Breite: 200px;
  Höhe: 45px;
  Z-Index: 6;
  Deckkraft: 0;
  Animation: Dunst 10 s 0 s linear unendlich;
}

.haze_stripe{
  Hintergrund: #a3b5c7;
  Position: absolut;
  unten: 75px;
  links: 20px;
  Breite: 115px;
  Höhe: 10px;
  Z-Index: 17;
  Deckkraft: 0;
  Rahmenradius: 360px;
  Animation: Dunststreifen 10 s 0,1 s linear unendlich;
}

.haze_stripe:nth-child(6){
  unten: 55px;
  Animation: Dunststreifen 10 s 0,2 s linear unendlich;
}
.haze_stripe:letztes-Kind{
  unten: 35px;
  Animation: Dunststreifen 10 s 0,4 s linear unendlich;
}

.Donner{
  Position: absolut;
  unten: 100px;
  links: 65px;
  Breite: 12px;
  Höhe: 12px;
  Hintergrund: #f9db62;
  Transformieren: Schrägstellung (-25 Grad);
  Deckkraft: 0;
  Animation: Donner 10 s 0 s linear unendlich;
}

.donner:vor{
  Inhalt: '';
  Position: absolut;
  oben: 11px;
  links: 0px;
  Breite: 25px;
  Höhe: 8px;
  Hintergrund: #f9db62;
}

.Donner:nach{
  Inhalt: '';
  Position: absolut;
  Breite: 0; 
  Höhe: 0;
  oben: 18px;
  rechts: -14px;
  Rahmen links: 5px durchgehend transparent;
  Rahmen rechts: 5px durchgehend transparent;
  
  Rahmen oben: 20px durchgezogen #f9db62;
  Transformation: Schrägstellung (5 Grad);
}

.Regen{
  Position: absolut;
  unten: 0px;
  links: 25px;
}

.regen ul{
  Listenstil: keiner;
  Rand: 0;
  Polsterung: 0px;
}

.rain ul li{
  schweben: links;
  Position: absolut;
  unten: 50px;
  links: 50px;
  Rand links: 20px;
  Hintergrund: #6ab9e9;
  Höhe: 40px;
  Breite: 10px;
  Rahmenradius: 360px;
  transformieren: drehen (35 Grad);
  Deckkraft: 0;
}

.rain ul li:erstes-Kind{
  Animation: Raini 10s 0s linear unendlich;
}

.rain ul li:nth-child(2){
  Animation: Rainii 10 s 0,2 s linear unendlich;
}

.rain ul li:letztes-Kind{
  Animation: Rainiii 10 s 0,4 s linear unendlich;
}

.Schneeregen{
  Position: absolut;
  unten: 0px;
  links: 25px;
}

.Schneeregen ul{
  Listenstil: keiner;
  Rand: 0;
  Polsterung: 0px;
}

.Schneeregen ul li{
  schweben: links;
  Position: absolut;
  unten: 50px;
  links: 50px;
  Rand links: 20px;
  Hintergrund: #fff;
  Höhe: 40px;
  Breite: 10px;
  Rahmenradius: 360px;
  transformieren: drehen (35 Grad);
  Deckkraft: 0;
}

.sleet ul li:erstes-Kind{
  Animation: Raini 10 s 1,0 s linear unendlich;
}

.sleet ul li:nth-child(2){
  Animation: Rainii 10 s 1,4 s linear unendlich;
}

.sleet ul li:letztes-Kind{
  Animation: Rainiii 10 s 1,6 s linear unendlich;
}

.Text{
  Position: absolut;
  unten: 0px;
}

.text ul{
  Listenstil: keiner;
  Rand: 0;
  Polsterung: 0;
}

.text ul li{
  Position: absolut;
  unten: -50px;
  Breite: 150px;
  Farbe: #fff;
  Schriftfamilie: „Raleway Dots“, kursiv;
  Schriftstärke: 100;
  Schriftgröße: 20px;
  Textausrichtung: zentriert;
  Deckkraft: 0;
}

.text ul li:erstes-Kind{
  Animation: Einblenden 10,0 s 0 s linear unendlich;
}

.text ul li:nth-child(2){
  Animation: Einblenden 10,0 s 1,6 s linear unendlich;
}

.text ul li:nth-child(3){
  Animation: Einblenden 10,0 s 2,4 s linear unendlich;
}

.text ul li:nth-child(4){
  Animation: Einblenden 10,0 s 3,4 s linear unendlich;
}

.text ul li:nth-child(5){
  Animation: Einblenden 10,0 s 4,0 s linear unendlich;
}

.text ul li:nth-child(6){
  Animation: Einblenden 10,0 s 5,4 s linear unendlich;
}

.text ul li:nth-child(7){
  Animation: Einblenden 10,0 s 6,4 s linear unendlich;
}

.text ul li:nth-child(8){
  Animation: Einblenden 10,0 s 7,2 s linear unendlich;
}

.text ul li:nth-child(9){
  Animation: Einblenden 10,0 s 8,2 s linear unendlich;
}

@keyframes Sonne{
  0 %{
    Deckkraft: 1;
    unten: 35px;
    rechts: 35px;
  }
  4 %
    unten: 80px;
    rechts: 80px;
  }
  4,5 %
    unten: 75px;
    rechts: 75px;
    Deckkraft: 1;
  }
  40 %
    Deckkraft: 1;
  }
  41 %
    unten: 75px;
    rechts: 75px;
    Deckkraft: 0;
  }
  100 %{
    Deckkraft: 0;
    unten: 0px;
    rechts: 0px;
  }
}

@keyframes cloud{
  0 %{
    transformieren: Skalierung (0,8);
    links: 120px;
    unten: 35px;
    Deckkraft: 0;
  }
  2 %{
    Deckkraft: 1;
  }
  3,5 %
    unten: 35px;
    links: 10px;
    Deckkraft: 1;
  }
  16 %
    transformieren: Skalierung (0,8);
  }
  18 %
    transformieren: Skalierung (0,95);
  }
  19 %
    transformieren: Skalierung (0,9);
  }
  48 %
    Deckkraft: 1;
    unten: 35px;
  }
  50 %{
    unten: 70px;
  }
  64 %
    
  }
  96 %
    Deckkraft: 1;
  }
  100 %{
    Deckkraft: 0;
    unten: 70px;
    links: 10px;
  }
}

@keyframes cloud_s{
  0 %{
    transformieren: Skalierung (0,6);
    Deckkraft: 0;
    unten: 40px;
    links: 18px;
  }
  dreiundzwanzig%{
    Deckkraft: 0;
  }
  vierundzwanzig%{
    Deckkraft: 1;
    unten: 40px;
    links: 30px;
  }
  28 %
    Deckkraft: 1;
    unten: 85px;
    links: 60px;
  }
  32 %
    transformieren: Skalierung (0,6);
  }
  34 %
    transformieren: Skalierung (0,75);
  }
  35 %
    transformieren: Skalierung (0,7);
  }
  48 %
    Deckkraft: 1;
  }
  49 %
    Deckkraft: 0;
  }
  100 %{
    transformieren: Skalierung (0,7);
    Deckkraft: 0;
    unten: 85px;
    links: 60px;
  }
}

@keyframes cloud_vs{
  0 %{
    Deckkraft: 0;
    unten: 85px;
    links: 60px;
  }
  39 %
    Deckkraft: 0;
  }
  40 %
    Deckkraft: 1; 
    unten: 85px;
    links: 60px;
  }
  42 %
    unten: 125px;
    links: 10px;
  }
  43 %
    unten: 120px;
    links: 15px;
  }
  48 %
    Deckkraft: 1;
  }
  49 %
    Deckkraft: 0;
  }
  100 %{
    Deckkraft: 0;
    unten: 120px;
    links: 15px;
  }
}

@keyframes dunst{
  0 %{
    Deckkraft: 0;
  }
  48 %
    Höhe: 0px;
    Deckkraft: 0;
  }
  49 %
    Höhe: 45px;
    Deckkraft: 1;
  }
  57 %
    Deckkraft: 1;
    Höhe: 45px;
  }
  58 %
    Deckkraft: 0;
    Höhe: 0px;
  }
}

@keyframes haze_stripe{
  0 %{
    Deckkraft: 0;
  }
  48 %
    Deckkraft: 0;
  }
  49 %
    Deckkraft: 1;
  }
  56 %
    Deckkraft: 1;
  }
  57 %
    Deckkraft: 0;
  }
}

@keyframes cloudi{
  0 %{
    Hintergrund: #fff;
  }
  56 %
    Hintergrund: #fff;
  }
  57 %
    Hintergrund: #92a4b6;
  }
  100 %{
    Hintergrund: #92a4b6;
  }
}

@keyframes donner{
  0 %{
    Deckkraft: 0;
    unten: 100px;
    links: 65px;
  }
  62 %
    Deckkraft: 0;
    unten: 100px;
    links: 65px;
  }
  64 %
    Deckkraft: 1;
    unten: 50px;
    links: 60px;
  }
  65 %
    Deckkraft: 1;
    unten: 55px;
    links: 61px;
  }
  72 %
    Deckkraft: 1;
    unten: 55px;
    links: 61px;
  }
  73 %
    Deckkraft: 0;
  }
  100 %{
    Deckkraft: 0;
    unten: 55px;
  }
}

@keyframes raini{
  0 %{
    Deckkraft: 0;
    unten: 100px;
    links: 60px;
  }
  72 %
    Deckkraft: 0;
    unten: 100px;
    links: 60px;
  }
  73 %
    Deckkraft: 1;
    unten: 15px;
    links: 50px;
  }
  74 %
    Deckkraft: 1;
    unten: 25px;
    links: 52px;
  }
  80 %
    Deckkraft: 1;
    unten: 25px;
    links: 52px;
  }
  81 %
    Deckkraft: 0;
    unten: -15px;
    links: 6px;
  }
  100 %{
    Deckkraft: 0;
    unten: 20px;
  }
}

@keyframes rainii{
  0 %{
    Deckkraft: 0;
    unten: 100px;
    links: 30px;
  }
  72 %
    Deckkraft: 0;
    unten: 100px;
    links: 30px;
  }
  73 %
    Deckkraft: 1;
    unten: 15px;
    links: 20px;
  }
  74 %
    Deckkraft: 1;
    unten: 25px;
    links: 22px;
  }
  80 %
    Deckkraft: 1;
    unten: 25px;
    links: 22px;
  }
  81 %
    Deckkraft: 0;
    unten: -15px;
    links: -6px;
  }
  100 %{
    Deckkraft: 0;
    unten: 20px;
  }
}

@keyframes rainiii{
  0 %{
    Deckkraft: 0;
    unten: 100px;
    links: 0px;
  }
  72 %
    Deckkraft: 0;
    unten: 100px;
    links: 0px;
  }
  73 %
    Deckkraft: 1;
    unten: 15px;
    links: -10px;
  }
  74 %
    Deckkraft: 1;
    unten: 25px;
    links: -8px;
  }
  80 %
    Deckkraft: 1;
    unten: 25px;
    links: -8px;
  }
  81 %
    Deckkraft: 0;
    unten: -15px;
    links: -28px;
  }
  100 %{
    Deckkraft: 0;
    unten: 20px;
  }
}

@keyframes fade_in{
  0 %{
    Deckkraft: 0;
  }
  8 %{
    Deckkraft: 1;
  }
  9 %{
    Deckkraft: 1;
  }
  11 %
    Deckkraft: 1;
  }
  12 %
    Deckkraft: 0;
  }
  100 %{
    Transparenzstadt: 0;
  }
}