关于帧动画steps属性的理解

 

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过渡方式