关于帧动画steps属性的理解
Posted Julia-Yuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于帧动画steps属性的理解相关的知识，希望对你有一定的参考价值。
CSS3的Animation有八个属性
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
- animation-timing-function
其中1-7大多都有介绍，但是animation-timing-function是控制时间的属性
在取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数
animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的
除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式
以上是关于关于帧动画steps属性的理解的主要内容，如果未能解决你的问题，请参考以下文章