~~~
<style>
div{
height: 2px;
width: 1000px;
animation-name: shanke;
animation-delay: 1s;
animation-duration: 5s;
animation-iteration-count: infinite;
animation: shanke 5s infinite;
}
@keyframes shanke{
0%{
width: 0;
}
25%{
width: 25%;
background: pink;
}
50%{
width: 50%;
background: plum;
}
75%{
width: 75%;
background: palevioletred;
}
100%{
width: 100%;
background: purple;
}
}
</style>
~~~
~~~
<body>
<div></div>
</body>
~~~
