前端总结CSS篇之贝塞尔曲线

曲线运动定义

物体运动轨迹是曲线的运动，称为“曲线运动”。当物体所受的合外力和它速度方向不在同一直线上，物体就是在做曲线运动（curvilinear motion）。

CSS中的速度关键字

• 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)）（相对于匀速，（开始和结束都慢）两头慢）
• cubic-bezier: 贝塞尔曲线函数，一共四个点，默认起点（0,0）终点（1,1），一般只需要定义两个动态点

cubic-bezier曲线运动原理理解

互成角度的运动方向，至少一方有变速运动，则会形成曲线

例子:

<style>
html,body{
  width: 100%;
  height: 100%;
  background: black;
}
.wrap{
  width: 800px;
  height: 800px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: rgba(255,255,255,.2);
}
.box{
  background: cadetblue;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  animation: top-right-x 3s 0s 1 ease-out,top-right-y 3s 0s 1 ease-in;
}
@keyframes top-right-x {
  from{
    left: 50%;
  }
  to{
    left: 100%;
  }
}
@keyframes top-right-y {
  from{
    top: 0;
  }
  to{
    top: 50%;
  }
}
</style>
<div class="wrap">
  <div class="box"></div>
</div>