CSS3 Animation 帧动画 steps()

@keyframes fn{

　　0%{}

　　100%{}

}　　

CSS3的Animation有八个属性

1. animation-name ：动画名　　fn
2. animation-duration：时间　　1s
3. animation-delay：延时　1s
4. animation-iteration-count：次数  infinite
5. animation-direction：方向 　　alternate(反向)
6. animation-play-state：控制    running paused
7. animation-fill-mode：状态　　forwards(当动画完成后，保持最后一个属性值)
8. animation-timing-function：关键帧变化 

animation-timing-function是控制时间的属性

在取值中除了常用到的 三次贝塞尔曲线 以外，还有 steps() 函数

animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的

除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式

 

steps 函数指定了一个阶跃函数

第一个参数指定了时间函数中的间隔数量（必须是正整数）

第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

 

 step-start，step-end 的区别

@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start ： 黄色与蓝色相互切换

step-end  ： 红色与黄色相互切换

2个参数都会选择性的跳过前后部分，start跳过0%，end跳过100%

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50%  直接就显示了黄色yellow

step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red

 

总结：

steps函数，它可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。

第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。可以看出：steps(1, start) 等于step-start，steps(1,end)等于step-end

最核心的一点就是：timing-function 作用于每两个关键帧之间，而不是整个动画