CSS3转换之间的区别在于缓解和缓解

CSS3转换有什么区别: ease-inease-out等等?

CSS3的过渡和animation支持宽松,正式被称为“计时function”。 常见的有ease-inease-outease-in-outeaselinear ,或者你可以用cubic-bezier()来指定你自己的。

  • ease-in将缓慢地开始animation,并完成速度。
  • ease-out将全速启动animation,然后慢慢完成。
  • ease-in-out缓慢开始,在animation中间最快,然后慢慢结束。
  • ease就像ease-in-out ,除了它开始稍快于结束。
  • linear使用缓动。
  • 最后, 这里是对cubic-bezier语法的很好的描述 ,但是除非你想要一些非常精确的效果,否则通常是不需要的。

基本上,缓解是缓慢的,缓和是缓慢加速,线性是不行的。 您可以在MDN的timing-function文档中find更详细的资源。

如果你确实需要上述精确的效果,那么令人惊叹的Lea Verou的cubic-bezier.com就在你身边! 这对于以graphics方式比较不同的定时function也很有用。

另外, steps()计时函数的作用类似于linear ,但仅在转换的开始和结束之间执行有限数量的步骤。 在CSS3animation中, steps()对我来说最为有用,而不是在转换中; 用点加载指标就是一个很好的例子。 传统上,人们使用一系列的静态图像(比如八个点,每帧两个不同的颜色)来产生运动幻觉。 通过steps(8)animation和rotate变换,您可以使用运动来产生单独帧的幻觉! 多么有趣。