Style animationTimingFunction 屬性
示例
更改 <div> 元素的 animationTimingFunction 屬性
document.getElementById("myDIV").style.animationTimingFunction = "linear";
自己動手試一試 »
描述
animationTimingFunction 指定動畫的速度曲線。
速度曲線定義了動畫從一組 CSS 樣式變為另一組樣式所用的時間。
速度曲線用於使變化平滑。
語法
返回 animationTimingFunction 屬性
object.style.animationTimingFunction
設定 animationTimingFunction 屬性
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
屬性值
值 | 描述 |
---|---|
linear | 動畫從開始到結束速度相同 |
ease | 預設值。動畫開始慢,然後快,最後慢 |
ease-in | 動畫開始慢 |
ease-out | 動畫結束慢 |
ease-in-out | 動畫開始和結束都慢 |
cubic-bezier(n, n, n, n) | 在 cubic-bezier 函式中定義您自己的值 可能的值是 0 到 1 的數字值 |
initial | 將此屬性設定為其預設值。閱讀關於 initial |
inherit | 從其父元素繼承此屬性。閱讀關於 inherit |
技術詳情
預設值 | ease |
---|---|
返回值 | 一個字串,表示元素的 animation-timing-function 屬性 |
CSS 版本 | CSS3 |
瀏覽器支援
animationTimingFunction
是 CSS3 (1999) 特性。
所有瀏覽器都完全支援。
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 11 |
相關頁面
CSS 參考:animation-timing-function 屬性