CSS3で実装されたテキストポップアップ効果

<div>123WORDPRESS.COM</div> 
<div> 
  <span>https://www.jb51.net</span>
</div>


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

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

体 {
  テキスト配置:中央;
  背景: 線形グラデーション(141度、#ccc 25%、#eee 40%、#ddd 55%);
  色:#555;
  フォントファミリー:'Roboto';
  フォントの太さ:300;
  フォントサイズ:32px;
  パディングトップ:40vh;
  高さ:100vh;
  オーバーフロー:非表示;
  -webkit-backface-visibility: 非表示;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

div {
  表示:インラインブロック;
  オーバーフロー:非表示;
  空白:折り返しなし;
}

div:first-of-type { /* パフォーマンス向上のため 
                       ID/クラスが使用されるべきでした。 
                       小規模なデモの場合 
                       今のところは大丈夫です*/
  アニメーション: 表示7秒無限;
}

div:最後の型 {
  幅:0px;
  アニメーション: 7 秒を無限に表示します。
}

div:最後のタイプ span {
  左マージン:-355px;
  アニメーション: スライドイン 7 秒 無限;
}

@keyframes 表示 {
    0% {不透明度:0;}
    20% {不透明度:1;}
    80% {不透明度:1;}
    100% {不透明度:0;}
}

@keyframes スライドイン {
    0% { 左マージン:-800px; }
    20% { 左マージン:-800px; }
    35% { 左マージン:0px; }
    100% { 左余白:0px; }
}

@keyframes の表示 {
    0% {不透明度:0;幅:0px;}
    20% {不透明度:1;幅:0px;}
    30% {幅:355px;}
    80% {不透明度:1;}
    100% {不透明度:0;幅:355px;}
}


ｐ {
  フォントサイズ:12px;
  色:#999;
  上マージン:200px;
}