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.
cubic-bezier Also known as
cubic Bezier, mainly for animation The function that generates the speed curve is
cubic-bezier(.
cubic-bezier from the picture below:
cubic-bezier Value range:
P1: Dynamic value (x1, y1)
P2: Dynamic value (x2, y2)
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.
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>
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); } ...
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)
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!