Definition of curved motion

Object motion trajectory is curved motion, called “curved motion”. A body is in a curvilinear motion when the force acting on it and the direction of its speed are not in a straight line.

Speed keyword in CSS

  • Linear: specifies the transition effect from beginning to end at the same speed (equal to cubic-bezier(0,0,1,1)). (uniform)
  • Ease: a transition effect that specifies a slow start, then faster, then slower end (Cubibezier (0.25,0.1,0.25,1)) (faster in the middle and slower at both ends, relative to a constant speed)
  • Ease-in: specifies the transition effect of starting at a slow speed (equal to cubic-bezier(0.42,0,1,1)) (slower at the beginning and faster later, relative to a constant speed)
  • Ease-out: specifies the transition effect ending at a slow speed (equal to cubic-bezier(0,0,0.58,1)) (faster at the beginning and slower at the end, relative to a constant speed)
  • Ease-in-out: specifies the transition effect of starting and ending at a slow speed (equal to cubic-bezier(0.42,0,0.58,1)) (slower at both ends relative to constant speed (slow at both beginning and end))
  • Cubic -bezier: a function of the bezier curve, a total of four points, the default starting point (0,0) and the end point (1,1), generally only two dynamic points need to be defined

Cubic – Bezier curve motion principle understanding

Angular directions of motion, with at least one variable speed, will form a curve

Example:

<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>
Copy the code