CSS KeyFrame效果

Question

我想要我的元素为fade in，然后2条线从圆中出来，一条向左，一条向右。
但我不能得到的是：每次我尝试使线条显示出来，它缩小了整个事物，我想修复中间的圆，然后让线条（容器）开始“增长”。
已经将它设置为绝对的，但没能成功：\

运行代码：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>