Home > Developer > Web Develop
http://yisibl.github.io/cubic-bezier/#.17,.67,.94,.53
Objectivecubic-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.
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:
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 .
UseIn 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(.17, .86, .73, .14); -o-transition: all 2s cubic-bezier(.17, .86, .73, .14); 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 thecubic-bezier
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 (buffer effect): Cubic-bezier (0.68,-0.55, 0.27, 1.55)
Jovey
Links: http://www.jianshu.com/p/d999f090d333
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
CSS3 Bezier Curve
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
