Flammenanimation mit CSS3 umgesetzt

<div Klasse="Container">
  <div Klasse="rote Flamme"></div>
  <div Klasse = "orange Flamme"></div>
  <div class="gelbe Flamme"></div>
  <div Klasse="weiße Flamme"></div>
  <div class="blauer Kreis"></div>
  <div Klasse="schwarzer Kreis"></div>
</div>

Körper{
  Hintergrund: schwarz;
}

.Container{
  Rand: 80px automatisch;
  Breite: 60px;
  Höhe: 60px;
  Position: relativ;
  Transform-Origin: Mitte unten;
  Animationsname: Flimmern;
  Animationsdauer: 3 ms;
  Animationsverzögerung: 200 ms;
  Animations-Timing-Funktion: Ease-In;
  Anzahl der Animationsiterationen: unendlich;
  Animationsrichtung: alternativ;
}

.Flamme{
  unten: 0;
  Position: absolut;
  Rahmen unten rechts – Radius: 50 %;
  Rahmen unten links – Radius: 50 %;
  Rahmen oben links-Radius: 50 %;
  transformieren: drehen (-45 Grad) skalieren (1,5, 1,5);
}

.Gelb{
  links: 15px; 
  Breite: 30px;
  Höhe: 30px;
  Hintergrund: Gold;
  Boxschatten: 0px 0px 9px 4px Gold;
}

.orange{
  links: 10px; 
  Breite: 40px;
  Höhe: 40px;
  Hintergrund: orange;
  Box-Schatten: 0px 0px 9px 4px orange;
}

.Rot{
  links: 5px;
  Breite: 50px;
  Höhe: 50px;
  Hintergrund: OrangeRot;
  Box-Schatten: 0px 0px 5px 4px OrangeRot;
}

.Weiß{
  links: 15px; 
  unten: -4px;
  Breite: 30px;
  Höhe: 30px;
  Hintergrund: weiß;
  Box-Schatten: 0px 0px 9px 4px weiß;
}

.Kreis{
  Randradius: 50 %;
  Position: absolut;  
}

.Blau{
  Breite: 10px;
  Höhe: 10px;
  links: 25px;
  unten: -25px; 
  Hintergrund: Schieferblau;
  Box-Schatten: 0px 0px 15px 10px Schieferblau;
}

.Schwarz{
  Breite: 40px;
  Höhe: 40px;
  links: 10px;
  unten: -60px;  
  Hintergrund: schwarz;
  Box-Schatten: 0px 0px 15px 10px schwarz;
}

@keyframes flackern{
  0 % {Transformieren: Drehen (-1 Grad);}
  20 % {Transformieren: Drehen (1 Grad);}
  40 % {Transformieren: Drehen (-1 Grad);}
  60 % {Transformieren: Drehen (1 Grad) Skalieren Y (1,04);}
  80 % {Transformieren: Drehen (-2 Grad) Skalieren Y (0,92);}
  100 % {Transformieren: Drehen (1 Grad);}
}