隐藏

CSS 过度中ease与ease-in-out的区别(ease曲线)

发布:2023/3/11 21:15:03作者:管理员 来源:本站 浏览次数:232

问题:


最近在学CSS中的过渡动画,有一个疑问:就是ease和ease-in-out,描述都是两头快中间慢。我想着TM不是重复了么。有啥区别啊???


于是就开始网上各种搜他们的区别。发现还是有其他同学在问这个问题。但是找了好大一圈看到的内容大多数都是下面这样。可以说是毫无收获。


最后想找一下曲线,看看曲线估计就能知道两者的区别了,结果找了一大圈都没找到。浪费一下午时间,最终终于黄天不负苦心人让我找到了。


linear:


规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。(匀速)


ease:


规定慢速开始,然后变快,然后慢速结束的过渡效果(cubibezier(0.25,0.1,0.25,1))(相对于匀速,中间快,两头慢)。


ease-in:


规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))(相对于匀速,开始的时候慢,之后快)。


ease-out:


规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))(相对于匀速,开始时快,结束时候间慢,)。


ease-in-out:


规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))(相对于匀速,(开始和结束都慢)两头慢)。


答案:


先上曲线!


下面是ease的曲线: