首頁 > 文章 > web前端 > css3怎麼設定動畫旋轉速度

css3怎麼設定動畫旋轉速度

WBOY原創: 2022-04-28 16:32:122841瀏覽

在css3中，可以利用「animation-timing-function」屬性來設定動畫旋轉速度，該屬性用於指定動畫將如何完成一個週期，設定動畫的速度曲線，語法為「元素{animation- timing-function:速度屬性值;}」。

css3怎麼設定動畫旋轉速度

本教學操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css3怎麼設定動畫旋轉速度

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>

輸出結果：

css3怎麼設定動畫旋轉速度

（學習影片分享：css影片教學）

以上是css3怎麼設定動畫旋轉速度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：css3能讓圖片傾斜嗎下一篇：css3能讓圖片傾斜嗎

看更多