# 本体

## 简介

`cubic-bezier` 又称三次贝塞尔，主要是为 `animation` 生成速度曲线的函数，规定是 `cubic-bezier(<x1>, <y1>, <x2>, <y2>)`

• P0：默认值 (0, 0)
• P1：动态取值 (x1, y1)
• P2：动态取值 (x2, y2)
• P3：默认值 (1, 1)

## 使用

``````<!DOCTYPE html>
<html lang="zh-cn">
<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>
<body>
<div class="animation"></div>
</body>
</html>``````

``````...
.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);
}
...``````

## 几个常用的固定值对应的 `cubic-bezier` 值以及速度曲线

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（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)