css 动画贝塞尔曲线

CSS动画经常使用贝塞尔曲线来控制动画曲线的形状，以获得更加平滑的动画效果。贝塞尔曲线可以被用于任何 CSS 使用 easing 属性的地方，如 transition、animation 和 transform。

/* 使用 linear 值作为 transition 或 animation-timing-function */
div {
  transition: top 1s linear;
  animation: rotate 1s linear infinite;
}

/* 使用自定义贝塞尔曲线转换曲线形状 */
div {
  transition: top 1s cubic-bezier(0.42,0.58,1);
}

/* 使用 keyframes 以及贝塞尔曲线定义动画曲线 */
@keyframes slidein {
  from { margin-left: 100%; width: 100%; }
  to { margin-left: 0%; width: 100%; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
  /* 在整个 rotate 动画周期中使用 ease-in-out 的曲线形状 */
  animation-timing-function: cubic-bezier(0.42,1);
}

贝塞尔曲线被定义为 4 个数值，分别为 P1x、P1y、P2x 和 P2y，可以通过在线工具或者自己手动调整，来创建出所需要的曲线形状。不仅能够创建出平滑的动画曲线，还能根据需要调整出加速或减速的效果，使动画效果更加自然。