前言

在了解 cubic-bezier 之前，你需要对 CSS3 中的动画效果有所认识，它是 animation-timing-function 和 transition-timing-function 中一个重要的内容。

本体

简介

cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(, , , )。

我们可以从下图中简要理解一下 cubic-bezier：

从上图我们需要知道的是 cubic-bezier 的取值范围:

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

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。

使用

在测试例子中：

<!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>  <div class="animation"></div></body></html>

我们可以在浏览器中看到，当鼠标移到元素上时，元素开始向右移动，开始比较慢，之后则比较快，移开时按原曲线回到原点。

在例子中，当我们不为 transition 添加 cubic-bezier 或是其他 timing-function 时，默认的速度曲线是 ease，此时的速度曲线是：

那么让我们在代码中加入 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);}...

再刷新页面观察效果，会看到动画在执行过程中有一段很缓慢的移动，前后的速度相似，此时的运动曲线是：

几个常用的固定值对应的 cubic-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（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

效果参考

文章所提到的动画效果可以在下面站点中看到，当然你也可以大胆尝试：

英文版在线预览（Lea Verou）
中文版在线预览（更多效果）
在线生成系列
作者的《Loading》库

参考

MDNW3School

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles