Einfacher CSS-Textanimationseffekt

<div id=Behälter>
  Willkommen 
  <div id=umdrehen>
    <div><div>jb51</div></div>
    <div><div>123WORDPRESS.COM</div></div>
    <div><div>Willkommen zu Besuch</div></div>
  </div>
  
</div>

<p>eine CSS3-Animationsdemo</p>

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

Körper {
  Rand: 0px;
  Schriftfamilie: „Roboto“;
  Textausrichtung: zentriert;
}

#Behälter {
  Farbe: Nr. 999;
  Texttransformation: Großbuchstaben;
  Schriftgröße: 36px;
  Schriftstärke: fett;
  Polsterung oben: 200px;  
  Position: fest;
  Breite: 100 %;
  unten: 45 %;
  Anzeige:Block;
}

#umdrehen {
  Höhe: 50px;
  Überlauf: versteckt;
}

#flip > div > div {
  Farbe: #fff;
  Polsterung: 4px 12px;
  Höhe: 45px;
  Rand unten: 45px;
  Anzeige: Inline-Block;
}

#flip div:erstes-Kind {
  Animation: 5 s linear unendlich zeigen;
}

#flip div div {
  Hintergrund: #42c58a;
}
#flip div:erstes-Kind div {
  Hintergrund: #4ec7f3;
}
#flip div:letztes-Kind div {
  Hintergrund: #DC143C;
}

@keyframes zeigen {
  0 % {margin-top:-270px;}
  5 % {margin-top:-180px;}
  33 % {margin-top:-180px;}
  38 % {margin-top:-90px;}
  66 % {margin-top:-90px;}
  71 % {margin-top:0px;}
  99,99 % {margin-top:0px;}
  100 % {margin-top:-270px;}
}

P {
  Position: fest;
  Breite: 100 %;
  unten: 30px;
  Schriftgröße: 12px;
  Farbe: Nr. 999;
  Rand oben: 200px;
}