在css3中,可以利用「animation-timing-function」屬性來設定動畫旋轉速度,該屬性用於指定動畫將如何完成一個週期,設定動畫的速度曲線,語法為「元素{animation- timing-function:速度屬性值;}」。
本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。
animation-timing-function指定動畫將如何完成一個週期。
速度曲線定義動畫從一套 CSS 樣式變成另一套所用的時間。
速度曲線用於使變化更為平滑。
預設值:ease
語法為:
animation-timing-function: value;
animation-timing-function所使用的數學函數,稱為三次貝茲曲線,速度曲線。使用此函數,您可以使用您自己的值,或使用預先定義的值之一:
屬性值如下:
linear 動畫從頭到尾的速度是相同的。測試
ease 預設。動畫以低速開始,然後加快,在結束前變慢。測試
ease-in 動畫以低速開始。測試
ease-out 動畫以低速結束。測試
ease-in-out 動畫以低速開始和結束。測試
steps(int,start|end)指定了時間函數中的間隔數量(步長)。有兩個參數,第一個參數指定函數的間隔數,該參數是一個正整數(大於 0)。第二個參數是可選的,表示動畫是從時間段的開頭連續還是末尾連續。意義分別如下:start:表示直接開始。 end:預設值,表示戛然而止。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
範例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .div1{ width:100px; height:100px; background-color:pink; animation:fadenum 5s; animation-timing-function:ease-in-out; } @keyframes fadenum{ 100%{transform:rotate(360deg);} } .div2{ width:100px; height:100px; background-color:pink; animation:fadenums 5s; animation-timing-function:linear; } @keyframes fadenums{ 100%{transform:rotate(360deg);} } </style> </head> <body> <div class="div1"></div><br><br> <div class="div2"></div> </body> </html>
輸出結果:
(學習影片分享:css影片教學)
以上是css3怎麼設定動畫旋轉速度的詳細內容。更多資訊請關注PHP中文網其他相關文章!