我们知道CSS3的Animation有八个属性
animation-name :动画名fnanimation-duration:时间1sanimation-delay:延时1sanimation-iteration-count:次数 infiniteanimation-direction:方向 alternate(反向)animation-play-state:控制 running pausedanimation-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感觉还是不错的