关于帧动画steps属性的理解

标签：iter   理解   lan   -name   nbsp   mod   .net   stat   取值   

CSS3的Animation有八个属性

1. animation-name
2. animation-duration
3. animation-delay
4. animation-iteration-count
5. animation-direction
6. animation-play-state
7. animation-fill-mode
8. animation-timing-function

其中1-7大多都有介绍，但是animation-timing-function是控制时间的属性

在取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数

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

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

关于帧动画steps属性的理解

标签：iter   理解   lan   -name   nbsp   mod   .net   stat   取值   

原文地址：http://www.cnblogs.com/Julia-Yuan/p/6629506.html