逐帧动画效果案例

打字机效果

模拟光标闪烁（遮罩左边框）和文字逐个出现（遮罩移动）的效果

<div class="box">这是测试这是测试这是测试这是测试这是测试这是测试</div>

@keyframes blink {
	0% {border-left-color: rgba(0, 0, 0, 0)}
	50% {border-left-color: rgba(0, 0, 0, 1)}
	100% {border-left-color: rgba(0, 0, 0, 0)}
}
@keyframes move {
	0% {left: 0;}
	100% {left: 100%;}
}
.box {
	/*变成内联块*/
	position: absolute;
	background-color: #f40;
}
.box::after {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: green;
	border-left: 2px solid #000;
	/*由于steps会抛弃尾帧，只有0和100的话，会把100抛弃掉，最后只有一个状态*/
	/*所以要在中间加一个状态，或者用forwards补帧*/
	animation: blink 1s steps(1, end) infinite,
			   /*24步，自动计算每一步要移动的距离*/
			   move 24s steps(24, end) forwards;
}