小編給大家分享一下css中animation-timing-function屬性的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主營柴桑網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,重慶APP開發(fā),柴桑h5小程序制作搭建,柴桑網(wǎng)站營銷推廣歡迎柴桑等地區(qū)企業(yè)咨詢

css animation-timing-function屬性是CSS的一個動畫屬性，用來規(guī)定動畫的速度曲線，即動畫的播放方式，使動畫的變化更為平滑。

css animation-timing-function屬性怎么用？

作用：animation-timing-function 規(guī)定動畫的速度曲線。速度曲線定義動畫從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r間。速度曲線用于使變化更為平滑。

語法：

animation-timing-function: value;

說明：animation-timing-function 使用名為三次貝塞爾（Cubic Bezier）函數(shù)的數(shù)學函數(shù)，來生成速度曲線。

您能夠在該函數(shù)中使用自己的值，也可以預定義的值：

● linear    動畫從頭到尾的速度是相同的。

● ease    默認。動畫以低速開始，然后加快，在結束前變慢。

● ease-in    動畫以低速開始。

● ease-out    動畫以低速結束。

● ease-in-out    動畫以低速開始和結束。

● cubic-bezier(n,n,n,n)    在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。

注釋：Internet Explorer 9 以及更早的版本不支持 animation-timing-function 屬性。

css animation-timing-function屬性使用示例

注釋：Internet Explorer 9 以及更早的版本不支持 animation-timing-function 屬性。

效果輸出：

以上是css中animation-timing-function屬性的使用方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！