EffectTiming

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

EffectTiming dictionary, part of the Web Animations API , is used by Element.animate() , KeyframeEffectReadOnly() ,和 KeyframeEffect() to describe timing properties for animation effects. These properties are all optional, although without setting a duration the animation will not play.

Simply put, these properties describe how the user agent should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends.

特性

delay 可选
The number of milliseconds to delay the start of the animation. Defaults to 0.
direction 可选
Whether the animation runs forwards ( normal ), backwards ( reverse ), switches direction after each iteration ( alternate ), or runs backwards and switches direction after each iteration ( alternate-reverse ). Defaults to "normal" .
duration 可选
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
easing 可选
The rate of the animation's change over time. Accepts the pre-defined values "linear" , "ease" , "ease-in" , "ease-out" ,和 "ease-in-out" , or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)" . Defaults to "linear" .
endDelay 可选
The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0.
fill 可选
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ( "backwards" ), retained after the animation has completed playing ( "forwards" ),或 both . Defaults to "none" .
iterationStart 可选
Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.
iterations 可选
The number of times the animation should repeat. Defaults to 1 , and can also take a value of Infinity to make it repeat for as long as the element exists.

规范

规范 状态 Comment
Web 动画
The definition of 'EffectTiming' in that specification.
工作草案 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
EffectTiming
Chrome 67
67
不支持 52 — 67
Alternate Name
Alternate Name Uses the non-standard name: AnimationEffectTimingProperties
Edge ≤79 Firefox 63 IE ? Opera Yes Safari ? WebView Android 67
67
不支持 52 — 67
Alternate Name
Alternate Name Uses the non-standard name: AnimationEffectTimingProperties
Chrome Android 67
67
不支持 52 — 67
Alternate Name
Alternate Name Uses the non-standard name: AnimationEffectTimingProperties
Firefox Android 63 Opera Android Yes Safari iOS ? Samsung Internet Android Yes
delay
Chrome 52 Edge ≤79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes
direction
Chrome 52 Edge ≤79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes
duration
Chrome 52 Edge ≤79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes
easing
Chrome 52 Edge ≤79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android Yes Safari iOS No Samsung Internet Android Yes
endDelay
Chrome 52 Edge 79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes
fill
Chrome 52 Edge 79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes
iterations
Chrome 52 Edge ≤79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes
iterationStart
Chrome 52 Edge ≤79 Firefox 63 IE No Opera Yes Safari No WebView Android 52 Chrome Android 52 Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
使用非标名称。

另请参阅