<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 让超出的文字自动隐藏 */
font-size: 20px;
overflow: hidden;
width: 0;
height: 30px;
background-color: pink;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* line是匀速，ease是先慢然后加速再变慢的一个过程，steps（）步长数量完成; */
animation: walk 5s steps(5) infinite;
/* 强制文字在一行内显示 */
white-space: nowrap;
}
/* 先定义动画状态 */
@keyframes walk {
0% {}
100% {
width: 150px;
}
}
</style>
</head>
<body>
<div>12345678910</div>
</body>
</html>
