Using CSS to make Bezier curves

Objective

cubic-bezierbefore you know it, you need to know something about the animation in CSS3, which is an animation-timing-function transition-timing-function important part of the.

Ontology

Brief introduction

cubic-bezierAlso known as three times of the Bezier, mainly for animation the generation of the speed curve function, the provisions are cubic-bezier(<x1>, <y1>, <x2>, <y2>) .

We can briefly understand cubic-bezier :

From what we need to know is cubic-bezier the range of values:

• P0: Default value (0, 0)

• P1: Dynamic Fetch value (x1, y1)

• P2: Dynamic Fetch value (x2, y2)

• P3: Default Value (1, 1)

What we need to pay attention to is the value of the P1 and P2 two X 轴 points, where the range of values is 0 to 1, when the value is out cubic-bezier of range will be invalidated Y 轴 , the value is not specified, of course, it does not need to be too large.

The most straightforward understanding is that a line will be placed in a range of only 1 of the axes, and two points from the middle to pull (the X-axis value interval is [0, 1],y axis arbitrary), the resulting curve is the speed curve of the animation .

Use

In the test example:

<! DOCTYPE html>
We can see in the browser that when the mouse moves over the element, the element starts to move to the right, starts relatively slowly, then quickly, and moves back to the origin as the original curve.

In the example, when we do not transition add cubic-bezier or otherwise timing-function , the default speed curve is ease , at this point the velocity curve is:

So let's add in the code cubic-bezier(.17, .86, .73, .14) :

..... animation {  ...  -webkit-transition: All    2s cubic-bezier (.)         ,.,.,. -o-transition: All  2s cubic-bezier (.)            ,.,.,. Transition: All  2s cubic-bezier (. 17,. 86,. 73,. 14);} ...
Refresh the page to observe the effect, you will see the animation in the execution of a very slow movement, before and after the speed is similar, at this time the motion curve is:


Several commonly used fixed values correspond to the cubic-bezier values and velocity curves


 

 
  
 
   
 
ease:cubic-bezier (. 25,. 1,. 25, 1) Liner:cubic-bezier (0, 0, 1, 1)/Cubic-bezier (1, 1, 0, 0) ease-in:cubic-bezier (., 0, 1, 1) ease-out:cubic-bezier (0, 0,. 58 , 1) Ease-in-out:cubic-bezier (. 0,. 1) in. Back (buffer effect): Cubic-bezier (0.68, -0.55, 0.27, 1.55)