缓动 The Easing Blueprint

基础 easing 动画

ease-out

快速加速然后停止

适合用户触发元素出现（例如 modal 出现）

ease-in-out

逐渐加速 - 平速 - 慢速结束 Starts slowly, speeds up and then slows down towards the end, like a ca

适合一个已经在页面上的元素变化位置/变更状态

ease-in

慢慢加速 starts slowly and ends fast.

应当避免使用（会让 UI 显得很慢）

linear

匀速运动

不够自然，仅在 loading、缓慢变化（marquee）展示等与交互无关的动画时使用

ease

与 ease-in-out 类似，但是不对称（starts faster and ends slower than an ease-in-out）

适用于一个已经在页面上的元素在 hover 时变换状态（color, background-color, opacity）

常用曲线

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
 
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
 
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}

made by Benjamin De Cock

自定义曲线

https://easings.co/