CSS KeyFrameの効果

Question

私の要素をfade inにして、円の外に2行、左に1行、右に1行します。
私が得ることができないのは、ラインを表示しようとするたびに、それは全体を縮小し、真ん中に円を修正して、ライン（コンテナ）を「成長」させたいと思います。
はすでに絶対にそれを設定し、それをしなかった：

コード実行中\：Codepen.io

Answer 1

あなたはpseudo selector:before and :afterを使用すると、滑らかCSS3 animationの代わりに、各要素ごとに異なるclassを追加することを作成することを行うことができ、

.container{ 
 
\t width:200px; 
 
\t height:auto; 
 
\t text-align:center; 
 
\t position:relative; 
 
\t top:10px; 
 
} 
 
.container > span{ 
 
\t display:block; 
 
\t position:relative; 
 
} 
 
.container:before{ 
 
\t content:''; 
 
\t position:absolute; 
 
\t width:10px; 
 
\t height:10px; 
 
\t background:blue; 
 
\t z-index:9; 
 
\t top:-10px; 
 
\t border-radius:50%; 
 
\t animation:opt 2s ease forwards; 
 
\t opacity:0; 
 
} 
 
.container:after{ 
 
\t content:''; 
 
\t position:absolute; 
 
\t width:10px; 
 
\t height:10px; 
 
\t background:blue; 
 
\t z-index:9; 
 
\t bottom:-12px; 
 
\t border-radius:50%; 
 
\t animation:opt 2s ease forwards; 
 
\t opacity:0; 
 
} 
 
@keyframes opt{ 
 
\t from{ 
 
\t \t opacity:0; 
 
\t } 
 
\t to{ 
 
\t \t opacity:1; 
 
\t } 
 
} 
 
.container > span:before{ 
 
\t content:''; 
 
\t position:absolute; 
 
\t width:0px; 
 
\t height:2px; 
 
\t background:#111; 
 
\t z-index:7; 
 
\t bottom:-10px; 
 
\t right:50%; 
 
\t transform:translate(0,-50%); 
 
\t transition:1s ease; 
 
\t animation:wdth 2s ease forwards 1s; 
 
} 
 
.container > span:after{ 
 
\t content:''; 
 
\t position:absolute; 
 
\t width:0px; 
 
\t height:2px; 
 
\t background:#111; 
 
\t z-index:7; 
 
\t top:-5px; 
 
\t left:50%; 
 
\t transition:1s ease; 
 
\t animation:wdth 2s ease forwards 1s; 
 
} 
 
@keyframes wdth{ 
 
\t from{ 
 
\t \t width:0px; 
 
\t } 
 
\t to{ 
 
\t \t width:50px; 
 
\t } 
 
}

<div class="container"> 
 
<span>Ghaleon Games</span> 
 
</div>