CSS3转换的易用性和易用性之间的差异

前端之家收集整理的这篇文章主要介绍了CSS3转换的易用性和易用性之间的差异前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
CSS3过渡的缓入,缓出等有什么区别? @H_502_2@

解决方法

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)动画和旋转变换,你使用运动产生单独的帧的错觉!多么有趣。

@H_502_2@ @H_502_2@

猜你在找的CSS相关文章