~~~
div{
height: 2px;
width: 1000px;
animation-name: shanke;
animation-delay: 0s;
animation-duration: 10s;
animation-iteration-count: infinite;
opacity: 0.5;
}
@keyframes shanke{
0%{
width: 0;
}
30%{
/* width: 25%; */
background: red;
}
45%{
/* width: 50%; */
background: blueviolet;
}
70%{
/* width: 75%; */
background: blue;
}
100%{
width: 100%;
background: yellow;
}
}
</style>
</head>
<body>
<div></div>
</body>
~~~
