linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

step-start：等同于 steps(1, start)

step-end：等同于 steps(1, end)

steps( integer [, [ start | end ] ]?)：接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值為end。

cubic-bezier( number , number , number , number )：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

這里主要介紹steps()

.heart{background-image: url( images/heart-sprite.png -webkit-animation: animate 1s steps(28) infinite;animation: animate 1s steps(28) infinite;}@keyframes animate { from {background-position: 0 0;} to {background-position: -2800px 0;}}

steps() 設置間隔參數，可以實現分步過渡

第一個參數指定了時間函數中的間隔數量（必須是正整數）
第二個參數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，默認為 end。

淺綠 = 支持

紅色 = 不支持

粉色 = 部分支持

在一些場景中會有錯誤行為

部分瀏覽器不支持偽元素動畫，或者支持得不夠好，盡可能不要利用偽元素來做動畫

以上就是CSS3中animation-timging-function的實例介紹的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。