Use CSS to create Bezier curves

一个新手
Release: 2017-10-08 09:32:18
Original
3054 people have browsed it

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

  1. 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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template