CSS3过渡的易用性和易用性之间的差异 [英] Difference between CSS3 transitions' ease-in and ease-out

问题描述

CSS3转换 ease-in ， ease-out 等之间有什么区别？ >

What’s the difference between CSS3 transitions’ ease-in, ease-out, etc.?

推荐答案

CSS3的过渡和动画支持宽松，正式称为定时功能。常见的是缓解，缓解， / code>， ease 和 linear ，或者您可以使用 cubic-bezier（）。

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().

• ease-in 将慢速开始动画，并以全速完成。


• 缓出将以全速启动动画，


• 将会慢慢开始，在动画的中间是最快的，然后慢慢完成。

• ease 就像 ease-in-out


• 最后， http://www.the-art-of-web.com/css/timing-function/\">有关立方贝塞尔 >语法，但除非你想要一些非常精确的效果，否则通常没有必要。



• ease-in will start the animation slowly, and finish at full speed.
• ease-out will start the animation at full speed, then finish slowly.
• ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.
• ease is like ease-in-out, except it starts slightly faster than it ends.
• linear uses no easing.
• Finally, here's a great description of the cubic-bezier syntax, but it's usually not necessary unless you want some very precise effects.

基本上，缓慢加速是慢慢加速，线性是不加速。您可以在 timing-function 的文档中找到更详细的资源，

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-function on MDN.

如果您确实需要上述精确效果，那么惊人的Lea Verou的 cubic-bezier.com 为您服务！

And if you do want the aforementioned precise effects, the amazing Lea Verou’s cubic-bezier.com is there for you! It’s also useful for comparing the different timing functions graphically.

另一个， c> c> c> c> / code>，但只在转换的开始和结束之间执行有限数量的步骤。 steps（）对我来说在CSS3动画中最有用，而不是在转换中;一个很好的例子是加载带点的指示器。传统上，使用一系列静态图像（例如八个点，每个帧改变两种颜色）以产生运动的错觉。使用 steps（8）动画和旋转变换，您使用运动产生单独帧的幻觉！多么有趣。

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 rotate transform, you’re using motion to produce the illusion of separate frames! How fun.

这篇关于CSS3过渡的易用性和易用性之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！