シンプルな CSS テキストアニメーション効果

<div id=コンテナ>
  いらっしゃいませ 
  <div id=フリップ>
    <div><div>jb51</div></div>
    <div><div>123WORDPRESS.COM</div></div>
    <div><div>ようこそ</div></div>
  </div>
  
</div>

<p>CSS3 アニメーション デモ</p>

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

体 {
  マージン:0px;
  フォントファミリー:'Roboto';
  テキスト配置:中央;
}

＃容器 {
  色:#999;
  テキスト変換:大文字;
  フォントサイズ:36px;
  フォントの太さ:太字;
  パディング上部:200px;  
  位置:固定;
  幅:100%;
  下部：45%;
  表示:ブロック;
}

#反転{
  高さ:50px;
  オーバーフロー:非表示;
}

#反転 > div > div {
  色:#fff;
  パディング:4px 12px;
  高さ:45px;
  下マージン:45px;
  表示:インラインブロック;
}

#反転 div:最初の子 {
  アニメーション: 5 秒間の線形無限を表示;
}

#反転 div div {
  背景:#42c58a;
}
#反転 div:最初の子 div {
  背景:#4ec7f3;
}
#反転 div:最後の子 div {
  背景:#DC143C;
}

@keyframes を表示 {
  0% {マージントップ:-270px;}
  5% {マージントップ:-180px;}
  33% {マージントップ:-180px;}
  38% {マージントップ:-90px;}
  66% {マージントップ:-90px;}
  71% {マージントップ:0px;}
  99.99% {マージントップ:0px;}
  100% {マージントップ:-270px;}
}

ｐ {
  位置:固定;
  幅:100%;
  下:30px;
  フォントサイズ:12px;
  色:#999;
  上マージン:200px;
}