## 通过animate属性做出的小特效
### 特效1：一根每过一秒就换一次颜色并不断加长的线
~~~
.xian{
height: 5px;
width: 300px;
animation-name: shake;/*动画名字*/
animation-delay: 1s;/*每个动画播放延迟时间*/
animation-duration: 5s;/*播放时间*/
animation-iteration-count: infinite;/*重复播放*/
}
@keyframes shake{
0%{
width: 0%；
}
25%{
width: 25%;
background: red;
}
50%{
width: 50%;
background: purple;
}
75%{
width: 75%;
background: blue;
}
100%{
width: 100%;
background: green;
}
}
<div class="xian"></div>
~~~
