CSS 动画之过渡属性 transition 改变用户体验

`： jump-start 表示左连续函数，即第一个跳跃发生在过渡开始时； jump-end 表示右连续函数，即最后一个跳跃发生在动画结束时； jump-none 两端都没有跳跃。相反，在0%和100%标记处各自停留，每个停留点占持续时间的1/n； jump-both 在 0% 和 100% 标记处都包含暂停，实际上在过渡时间内增加了一个步骤； start 与 jump-start 相同。 end 与 jump-end 相同。 语言很空洞，看后面例子。 语法：

transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
transition-timing-function: step-start;
transition-timing-function: steps(5, jump-end);

在使用 Chrome 调试工具时候，发现 linear 还有一种函数式的写法，查阅了兼容性，发现这种写法比较吃浏览器版本，都是 2023 年之后的浏览器版本才开始支持。写法如下：

/* 第一位表示运动进度，第二位表示时间百分比 */
transition-timing-function: linear(
  0 0%,
  0.22 2.1%,
  0.86 6.5%,
  1.11 8.6%,
  1.3 10.7%,
  1.35 11.8%,
  1.37 12.9%,
  1.37 13.7%,
  1.36 14.5%,
  1.32 16.2%,
  1.03 21.8%,
  0.94 24%,
  0.89 25.9%,
  0.88 26.85%,
  0.87 27.8%,
  0.87 29.25%,
  0.88 30.7%,
  0.91 32.4%,
  0.98 36.4%,
  1.01 38.3%,
  1.04 40.5%,
  1.05 42.7%,
  1.05 44.1%,
  1.04 45.7%,
  1 53.3%,
  0.99 55.4%,
  0.98 57.5%,
  0.99 60.7%,
  1 68.1%,
  1.01 72.2%,
  1 86.7%,
  1 100%
)

transition-delay

transition-delay 属性用于设置过渡动画开始前的等待时间，单位是秒（s）或毫秒（ms），默认是 0s，表示不用延迟。语法与 transition-duration 一样。

transition

简写属性，同时设置 transition-property、transition-duration、transition-timing-function、transition-delay 四个属性。 语法：

transition: transform 3s; /* transform 属性添加 3s 过渡 */
transition: transform 3s 0.5s; /* transform 属性添加 3s 过渡，延迟 0.5s 开始 */
transition: transform 3s ease-in-out; /* transform 属性添加 3s 过渡，使用 ease-in-out 速度曲线 */
transition: transform 3s ease-in-out 0.5s; /* transform 属性添加 3s 过渡，使用 ease-in-out 速度曲线，延迟 0.5s 开始 */

will-change

will-change 这是一般双刃剑，用得好可以优化性能，用得不好反而会使用大量机器资源导致页面变慢！！ 使用准则：此属性应当作为最后的手段使用，不要过早优化，如果您的页面未出现卡顿变慢，那么您不需要使用这个属性！ 使用方式：

will-change: transform; /* 提前分配 GPU 资源，优化 transform 变化 */

效果演示

不同曲线效果

不同曲线会影响动画运动速度。

<div>
  <div>ease</div>
  <div>linear</div>
  <div>ease-in</div>
  <div>ease-out</div>
  <div>ease-in-out</div>
  <div>cubic-bezier</div>
</div>

效果：

steps 逐帧动画效果

steps 可以理解为关键帧动画，每次都跳到一个关键帧。

<div>
  <div>step-start</div>
  <div>step-end</div>
  <div>steps(5, start)</div>
  <div>steps(5, jump-start)</div>
  <div>steps(5, jump-end)</div>
  <div>steps(5, jump-none)</div>
  <div>steps(5, jump-both)</div>
  <div>steps(5, start)</div>
  <div>steps(5, end)</div>
</div>

效果：

不同持续时间

持续时间越短，运动越快。

<div>
  <div>1s</div>
  <div>2s</div>
  <div>500ms</div>
  <div>1500ms</div>
</div>

效果：

不同延迟时间

延迟时间越长，动画等待时间越久。

<div>
  <div>1s</div>
  <div>2s</div>
  <div>500ms</div>
  <div>1500ms</div>
</div>

效果：

贝塞尔曲线

Chrome 开发者工具内置曲线调试工具： 点击 1 可以呼出调试工具，2 可以切换不同类型的曲线，3 可以切换同类型的不同曲线，4 可以拖拽手柄绘制不同曲线。 这里再分享一个在线绘制贝塞尔曲线的链接：https://yisibl.github.io/cubic-bezier/ 图解贝塞尔曲线： 图中红色箭头指向的红点表示：在动画执行 37% 时间的时候要运动到目标的 53% 位置。 图中 1（x1, y1） 和 2（x2, y2） 分别表示控制贝塞尔取消的两个坐标点，cubic-bezier(x1, y1, x2, y2)。 贝塞尔曲线越陡峭，表示速度越快。

总结

1. 在使用 transition 过渡动画时，必须要有触发条件！比如鼠标放上时、鼠标离开时、元素的 class 变化等。
2. transition 无法做到让元素无休止的运动下去，过渡动画必须有持续时间！
3. transition-property 应当尽可能少的使用 all（浏览器需要监控元素的所有可过渡属性）。
4. transition-property 指定的属性必须是可量化的属性，比如 transform、background-color、color 等，不能是 display、float、font-style 这种无法计算的属性。
5. 避免过渡 margin/width 等布局属性（易引发重排，性能差）