CSS KeyFrame效果

Question

我希望我的元素到fade in然后两条线从圆圈中出来，一条线在左边，一条线在右边。
但我无法得到的是：每次我试图让线条显示出来时，它会收缩整个事物，我想在中间修复圆圈然后让线条（容器）开始“增长”。
已经把它设置为绝对但没有成功：\

代码运行：Codepen.io

Answer 1

您可以使用pseudo selector :before and :after来创建流畅的CSS3 animation，而不是为每个元素添加不同的class，

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

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