发布：2023/3/11 21:15:03作者：管理员 来源：本站 浏览次数：901
问题：
最近在学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的曲线：
下面是ease-in-out的曲线：
图片的横坐标是时间，纵坐标是变化的参数例如移动的距离，或者缩放的尺寸，旋转的角度等。为了简单，我们就假设是平移动画里面的距离。
可以看出，斜率就是速度了。有了曲线问题就简单了。
重点来了！！！
ease：开始很慢，但是很快就加速到一个比较大的速度，时间过半就开始缓慢减速，直到最后减速为0；
ease-in-out：开始慢，但是匀加速到一个速度大概时间到1/3的时候就保持这个速度直到最后1/3时间再均匀减速。
加分项：
以下视频就可以看出他们各自的速度了，ease一出来就一马当先，直到最后就很慢，等到了其他选手。
