Preface

Before understanding cubic-bezier, you need to know something about the animation effect in CSS3, which is animation-timing-function and# An important content in ##transition-timing-function.

Ontology

Introduction

cubic-bezier Also known as cubic Bezier, mainly for animation The function that generates the speed curve is cubic-bezier(, , , ).

We can briefly understand

cubic-bezier from the picture below:

What we need to know from the picture above is the selection of

cubic-bezier Value range:

P0: Default value (0, 0)
P1: Dynamic value (x1, y1)
P2: Dynamic value (x2, y2)
P3: Default value (1, 1 )

What we need to pay attention to is the values of the two points P1 and P2, and the value range of the

X axis is 0 to 1, when the value exceeds the range, cubic-bezier will be invalid; The value of Y-axis is not specified, and of course there is no need to pass it. big.

The most direct understanding is to put

a straight line on the coordinate axis with a range of only 1, and take out two points from the middle to pull (the value range of the X-axis is [0, 1], the Y axis is arbitrary), and the final curve formed is the speed curve of the animation.

Use

In the test example:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .animation {
      width: 50px;
      height: 50px;
      background-color: #ed3;
      -webkit-transition:  all 2s;
           -o-transition:  all 2s;
              transition:  all 2s;
    }
    .animation:hover {
      -webkit-transform:  translateX(100px);
          -ms-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }
  </style>
</head>
<body>
  <p class="animation"></p>
</body>
</html>

Copy after login

We can see in the browser that when the mouse is moved over the element, the element starts to move to the right and the comparison starts Slowly, then faster. When moving away, press the original curve to return to the origin.

In the example, when we do not add

cubic-bezier or other timing-function to transition, the default speed curve is ease, the speed curve at this time is:

Then let us add cubic-bezier(.17, .86, .73, .14)：

....animation {
  ...  -webkit-transition:  
  all 2s cubic-bezier(.17, .86, .73, .14);       
  -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);          
  transition:  all 2s cubic-bezier(.17, .86, .73, .14);
}
...

Copy after login

Refresh the page to observe the effect. You will see that there is a very slow movement during the execution of the animation. The speed before and after is similar. The motion curve at this time is:

cubic-bezier `values and speed curves corresponding to several commonly used fixed values`

ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

Copy after login

The above is the detailed content of Use CSS to create Bezier curves. For more information, please follow other related articles on the PHP Chinese website!