CSS CSS3 过渡的缓入和缓出之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9629346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between CSS3 transitions' ease-in and ease-out
提问by user960567
What's the difference between CSS3 transitions' ease-in, ease-out, etc.?
什么是CSS3过渡的区别ease-in，ease-out等等？
回答by Ry-
CSS3's transitions and animations support easing, formally called a "timing function". The common ones are ease-in, ease-out, ease-in-out, ease, and linear, or you can specify your own using cubic-bezier().
CSS3 的过渡和动画支持缓动，正式称为“计时函数”。常见的有ease-in、ease-out、ease-in-out、ease和linear，或者您可以使用 指定自己的cubic-bezier()。
ease-inwill start the animation slowly, and finish at full speed.ease-outwill start the animation at full speed, then finish slowly.ease-in-outwill start slowly, be fastest at the middle of the animation, then finish slowly.easeis likeease-in-out, except it starts slightly faster than it ends.linearuses no easing.- Finally, here's a great descriptionof the
cubic-beziersyntax, but it's usually not necessary unless you want some very precise effects.
ease-in将缓慢启动动画，并全速完成。ease-out将全速开始动画，然后缓慢结束。ease-in-out将缓慢开始，在动画中间最快，然后缓慢结束。ease就像ease-in-out，除了它开始比结束稍快。linear不使用缓动。- 最后，这里有一个很好的
cubic-bezier语法描述，但通常没有必要，除非你想要一些非常精确的效果。
Basically, easing out is to slow to a halt, easing in is to slowly accelerate, and linear is to do neither. You can find more detailed resources at the documentation for timing-functionon MDN.
基本上，缓出是缓慢停止，缓入是缓慢加速，线性是两者都不做。您可以在 MDN上的文档中timing-function找到更详细的资源。
And if you do want the aforementioned precise effects, the amazing Lea Verou's cubic-bezier.comis there for you! It's also useful for comparing the different timing functions graphically.
如果您确实想要上述精确效果，那么令人惊叹的 Lea Verou 的cube-bezier.com就在您身边！它对于以图形方式比较不同的计时功能也很有用。
Another, the steps()timing function, acts like linear, but only performs a finite number of steps between the transition's beginning and its end. steps()has been most useful to me in CSS3 animations, rather than in transitions; a good example is in loading indicators with dots. Traditionally, one uses a series of static images (say eight dots, two changing colour each frame) to produce the illusion of motion. With a steps(8)animation and a rotatetransform, you're using motion to produce the illusion of separate frames! How fun.
另一个是steps()计时函数，其作用类似于linear，但仅在转换的开始和结束之间执行有限数量的步骤。steps()在 CSS3 动画中对我最有用，而不是在过渡中；一个很好的例子是用点加载指标。传统上，人们使用一系列静态图像（比如八个点，每帧两种颜色变化）来产生运动的错觉。通过steps(8)动画和rotate变换，您正在使用运动来产生单独帧的错觉！多么有趣。
