English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Different speed transition effects from start to end:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>cubic-bezier() function</h1>
<p>Move the mouse over the div element to see the effect.</p>
<div></div>
<p><b>Attention:</b> Internet Explorer 9 and earlier versions of browsers do not support this effect.</p>
</body>
</html>Test and see ‹/›cubic-bezier() function defines a Bezier curve (Cubic Bezier).
The Bezier curve is defined by four points P0, P1，P2 and P3 definition. P0 and P3 is the starting point and ending point of the curve. P0 is (0,0) and represents the initial time and initial state, P3is (1,1）and represents the final time and final state.
From the above figure we need to know that cubic-The value range of bezier:
P0：Default value (0, 0) P1:Dynamic value (x1, y1) P2:Dynamic value (x2, y2) P3:Default value (1, 1)
We need to pay attention to P1 and P2 The values of the two points, and the value range of the X-axis is 0 to 1When the value exceeds the range, cubic-bezier will be invalid; The value of the Y-axis is not specified, of course, it does not need to be too large.
The most direct understanding is that a straight line will be placed in the range only 1 in the coordinate axis, and pull out two points from the middle to stretch (The value range of the X-axis is [0, 1], Y-axis arbitrary), and the resulting curve is the animation speed curve.
cubic-bezier() can be used animation-timing-function and transition-timing-function attribute.
Supported version: CSS3
The numbers in the table indicate the first browser version that supports this function.
| function | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
cubic-bezier(x1,y1,x2,y2)
| Value | Description |
|---|---|
| x1,y1,x2,y2 | is required. Numeric value, x1 and x2 Must be between 0 to 1 of the number. |