## 通過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>
~~~
