CSS3 animation 帧动画 steps详解

我们知道CSS3的Animation有八个属性

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

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

animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的
但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式

steps 函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

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

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

查了很多关于steps的资料，都是文字，理解起来不是特别透彻，感觉还是直接上代码看效果更理解些

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

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

这里有几个demo感觉还是不错的