CSS3 cubic-bezier defining velocity curve with Seibel curve

Brief introduction

　　　　  cubic-bezierAlso known as three times Bezier, a curve is depicted with four dots (P0,P1,P2,P3).

P0 defaults to (0,0), P3 defaults to (). So we just have to focus on P1,P2.

In the CSS3 animation, it is used to represent the speed curve.

about the three-time Bell curve:

Formula:;

Want to know three times Bell curve, self Baidu.

don't want to know can be directly adjusted on this website: http://www.roblaplaca.com/examples/bezierBuilder/# get parameters.

The website is slow to enter, need wait a while.

Role

In the animation effect in CSS3, set the velocity motion curve.

Animation-timing-function:cubic-bezier (X1,Y1,X2,Y2);

Use default ease:

　　　　　

Ease-in:

　　　　　　

Ease-out:

　　　　　　

Ease-in-out:

　　　　　　　　

Linear

　　　　　　　　

Post-language

　　　　The slope of the speed, you can go to the top of the site itself, can achieve a variety of effects.

For example, you can stop in the middle for a while:

　　　　

　　　　

CSS3 cubic-bezier to define the velocity curve with a seibel curve