改进标题外观的CSS动画

Question

我正在寻找一些有兴趣查看我的代码并发表意见的人。

总结一下，我的项目是关于制作标题外观的炫酷动画，其中一边是彩色块的效果，另一面是在收缩时从另一边消失并让文字出现。

我的目标是实现简单的事情，只需给他们正确的类，就可以轻松地在不同的元素上使用。

我只使用CSS来制作动画，以提高加载时间。

我绝对希望动画自动适应其中包含的文字大小！

我遇到的问题：

宽度动画从左到右很容易但不是从右到左，因为CSS'动画'中没有定义原点（比如在'transform'中）来解决问题我使用了两个元素：

• 第一个位置绝对，左：0
• 第二个位置绝对，右：0

每个只制作动画的一部分。我觉得有点难过使用两个元素来假装只有一个元素的动画，但我并没有想出这样做的不同的方式。

所以这是我的代码：

html, body{
	margin: 0;
	padding: 0;
	min-width: 1200px; 
	width: 100%;
	height: 100%;
	background-color: #FE4D3D;
	font-family: arial;
}


#container{
	margin-left: 10px;
	display: inline-block;
}



.animated-block-from-left{
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	height: 100%;	
  	width: 0%;
  	animation: grandir 1s ease ;

}

@keyframes grandir{
	0%{width: 0%;}
	100%{width: 100%;}
}

.animated-block-from-right{
	position: absolute;
	top:0;
	right:0;
	z-index: 2;
	height: 100%;	
  	width: 0%;
  	animation: retrecir 1s 1s ease ;

}


@keyframes retrecir{
	0%{width: 100%;}
	100%{width: 0%;}
}



.yellow{
	background-color: #FFFE02;
}


h1{
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	font-size: 80px;
	color: transparent;
	animation: textappear 0.1s 1s forwards;
	z-index: 1;
}

@keyframes textappear{
	100%{color: #FFFE02;}
}

<div id='container'>

	<h1>
		HELLO JOHN !
		<div id="line" class="animated-block-from-left yellow"> </div>
		<div id="line" class="animated-block-from-right yellow"> </div>

	</h1>

</div>

所有的意见，意见都是最受欢迎的！

谢谢！