会用到 steps(count, position) 方法，它是一个 timing function ，会把过渡分成 count 步 position 的默认值是 end ，还可以为 start 。假如现在有一个动画分成5段， end 会在第一段的时间执行完后才到第一段的终点即第二段的起点，一次类推执行动画，当执行到最后一段时，到达不了最后一步的终点就会到回到起点重新开始执行动画；而 start 是先到第一段的终点，等第一段的时间执行完后，到达第二段的终点，以此类推，能到达最后一段的终点。
具体实现如下：
效果图：
未完待续。。。
HTML+CSS网站点赞和打赏的功能，实现方法如下：
1、HTML代码：
<body><div class="thumbs_content">
<a href="javascript:void(0)" class="thumbs_button fa fa-thumbs-up" title="点赞，支持一下"> 点赞</a>
<a href="javascript:void(0)" class="reward_button fa fa-money" title="打赏，支持一下"> 打赏</a>
<span class="clear"></span>
</div>
</body>
2、CSS代码如下：
<style type="text/css">.thumbs_content{
width: 291px
margin: 0 auto
}
.thumbs_button{
float: left
width:145px
text-align: center
margin:5px auto
height: 45px
line-height: 45px
background-color:#444
color:#fbfbfb
text-align:center
text-decoration:none
font-weight:bold
font-size:16px
transition: all 0.3s
border-radius: 0 0 0 25px
-webkit-border-radius: 0 0 0 25px
-moz-border-radius: 0 0 0 25px
-o-border-radius: 0 0 0 25px
}
.reward_button{
float: left
width:145px
text-align: center
margin:5px auto
height: 45px
line-height: 45px
background-color:#cd4450
color:#fbfbfb
text-align:center
text-decoration:none
font-weight:bold
font-size:16px
border-left:1px solid #fbfbfb
transition: all 0.3s
border-radius: 0 25px 0 0
-webkit-border-radius: 0 25px 0 0
-moz-border-radius: 0 25px 0 0
-o-border-radius: 0 25px 0 0
}
.thumbs_button:hover, .reward_button:hover{
opacity:0.8
font-size:18px
}
.clear{
clear:both
}
</style>
3、效果图：
