CSS3 Bezier Curve

Source: Internet
Author: User

http://yisibl.github.io/cubic-bezier/#.17,.67,.94,.53

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.

Introduction to Ontology

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(.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-bezierValues and velocity curves
    1. ease: Cubic-bezier (. 25,. 1,. 25, 1)

    2. liner: Cubic-bezier (0, 0, 1, 1)/Cubic-bezier (1, 1, 0, 0)

    3. ease-in: Cubic-bezier (. 42, 0, 1, 1)

    4. ease-out: Cubic-bezier (0, 0,. 58, 1)

    5. ease-in-out: Cubic-bezier (. 42, 0,. 58, 1)

    6. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.