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>

​