使⽤animation制作进度条
先来看看最终效果：
css属性animation就像border⼀样，是动画属性的简写。就事论事，上边这个⽆⽆限制的跑马灯或者叫做进度条是怎么实现的呢？为了得到会动的效果，需要先写出静态的之后再考虑使⽤animation让静态的变成动态的就⾏了。
好，为了得到静态的效果，先写点代码：
HTML与CSS:
<div class="progress ">
<div class="thumb">div>
div>
.progress{
margin: 100px auto;
width: 880px;
height: 10px;
border-radius: 5px;
background: purple;
}
.thumb{
background: #12c4ff;
position: relative;
left: 0;
width: 100px;
height: 10px;
border-radius: 5px;
}
就这么点代码就可以有下⾯的效果了：
再编写animation的相关代码：
@keyframes movethumb {
0% {left:0;}
100% {left:780px;}
}
.animationtest{
animation:movethumb 4s  linear  infinite;
}
修改上边的HTML代码加⼊animationtest这个css类：
<div class="progress ">
<div class="thumb animationtest">div>
div>
即可。到此为⽌，这个进度条就完成了。
注意：
1.当然了，如果你浏览器⽐较⽼或者⽤相对冷门的浏览器，可能会看不到想要的结果，因为我尽量把代码简化了，不想让其他冗余的⽆关代码⼲扰本次要说的内容，所以有些考虑兼容性、美观性的代码就去掉了，这样是为了更好的“拨开云雾见天⽇”有⽊有啊，各位要知道我的良苦⽤⼼啊。
2.有些同学不理解有些css属性的写法，就拿本次这个animation属性来说，你可能还见过这样写的“-we
bkit-animation”、这样写的“-moz-animation”等，这是啥意思呢？我会专门写篇⽂章来说的
3.有⼈可能不想让这个进度条⽆限循环的动下去，可能只想让它从左到右⾛⼀次，并且最终要停留在最右边那怎么整呢？这时候需要了解⼀下各个属性是什么意思：
属性名属性解释
border radius什么意思
animation-name动画名称，由@keyframes定义
animation-duration整个动画需要⼏秒执⾏完成
animation-timing-function速度曲线。默认是 "ease"，可⽤值⽐如ease-in ease-out linear(匀速)等
animation-delay多少秒后动画开始播放
animation-iteration-count动画重复次数，默认1 可⽤值：正整数、infinite(⽆穷次)
animation-direction动画是否在下⼀周期逆向播放，默认是 "normal"
animation-play-state动画状态，running
animation-fill-mode forwards：停留在最后状态  backwards：开始时的状态
⽐如，要想实现“只想让它从左到右⾛⼀次，并且最终要停留在最右边”只需要把“animation:movethumb 4s linear infinite;”修改
为“animation:movethumb 4s linear 1 forwards;”即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。