CSS3过渡的缓入,缓出等有什么区别?
解决方法
CSS3的过渡和动画支持宽松,正式称为“定时功能”。常见的是easy-in,ease-out,ease-in-out,ease和linear,或者你可以使用cubic-bezier()指定自己的。
> easy-in将缓慢启动动画,并以全速完成。
> easy-out将以全速启动动画,然后慢慢完成。
> easy-in-out将慢慢开始,在动画的中间最快,然后慢慢完成。
> ease是类似于ease-in-out,除了它开始稍微快于结束。
>线性使用不缓解。
>最后,立方贝塞尔语法的here’s a great description,但它通常不是必要的,除非你想要一些非常精确的效果。
基本上,缓和是缓慢到停止,缓和是缓慢加速,线性是不做。您可以在documentation for timing-function
on MDN找到更详细的资源。
如果你想要上述精确的效果,惊人的Lea Verou的cubic-bezier.com是为你的!它还可用于以图形方式比较不同的计时功能。
另一个,the steps()
timing function,行为像线性,但只在转换的开始和结束之间执行有限数量的步骤。 steps()对我来说最有用的是CSS3动画,而不是转换;一个很好的例子是加载带点的指标。传统上,使用一系列静态图像(例如八个点,每个帧改变两种颜色)以产生运动的错觉。有步骤(8)动画和旋转变换,你使用运动产生单独的帧的错觉!多么有趣。