CSS3过渡的缓入和缓出之间的区别

Question

CSS3过渡“ease-in，ease-out等有什么区别？”

Answer 1

CSS3的过渡和动画支持缓和，正式称为“计时功能”。常见的是ease-in，ease-out，ease-in-out，ease和linear，或者您可以使用cubic-bezier()指定自己的。{/ p>

• ease-in将慢慢启动动画，并以全速结束。
• ease-out将全速启动动画，然后慢慢完成。
• ease-in-out将慢慢开始，在动画中间最快，然后慢慢完成。
• ease与ease-in-out类似，但它的开始时间略快于结束。
• linear不使用缓动。
• 最后，cubic-bezier语法的here's a great description，但除非您想要一些非常精确的效果，否则通常没有必要。

基本上，宽松是缓慢停止，缓和是缓慢加速，而线性则不会。您可以在documentation for timing-function on MDN找到更详细的资源。

如果您确实需要上述精确效果，那么惊人的Lea Verou cubic-bezier.com就在您身边！它对于以图形方式比较不同的时序功能也很有用。

另一个the steps() timing function，就像linear一样，但只在转换的开始和结束之间执行有限数量的步骤。在CSS3动画中，steps()对我来说最有用，而不是在过渡中;一个很好的例子是用点加载指标。传统上，人们使用一系列静态图像（比如八个点，每帧改变两种颜色）来产生运动的错觉。使用steps(8)动画和rotate变换，您将使用动作来产生单独帧的错觉！多么有趣。