KeyframeEffect

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

KeyframeEffect interface of the Web Animations API lets us create sets of animatable properties and values, called keyframes. These can then be played using the Animation() 构造函数。

构造函数

KeyframeEffect()
返回新 KeyframeEffect object instance, and also allows you to clone an existing keyframe effect object instance.

特性

KeyframeEffect.target
Gets and sets the element, or originating element of the pseudo-element, being animated by this object. This may be null for animations that do not target a specific element or pseudo-element.
KeyframeEffect.pseudoElement
Gets and sets the selector of the pseudo-element being animated by this object. This may be null for animations that do not target a pseudo-element.
KeyframeEffect.iterationComposite
Gets and sets the iteration composite operation for resolving the property value changes of this keyframe effect.
KeyframeEffect.composite
Gets and sets the composite operation property for resolving the property value changes between this and other keyframe effects.

方法

This interface inherits some of its methods from its parent, AnimationEffect .

AnimationEffect.getComputedTiming()
Returns the calculated, current timing values for this keyframe effect.
KeyframeEffect.getKeyframes()
Returns the computed keyframes that make up this effect along with their computed keyframe offsets.
AnimationEffect.getTiming()
EffectTiming object associated with the animation containing all the animation's timing values.
KeyframeEffect.setKeyframes()
Replaces the set of keyframes that make up this effect.
AnimationEffect.updateTiming()
Updates the specified timing properties.

范例

In the Follow the White Rabbit example , the KeyframeEffect constructor is used to create a set of keyframes that dictate how the White Rabbit should animate down the hole:

 var rabbitDownKeyframes = new KeyframeEffect(
    whiteRabbit, // element to animate
    [
      { transform: 'translateY(0%)' }, // keyframe
      { transform: 'translateY(100%)' } // keyframe
    ],
    { duration: 3000, fill: 'forwards' } // keyframe options
  );
					

规范

规范 状态 Comment
Web 动画
The definition of 'KeyframeEffect' 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
KeyframeEffect
Chrome Yes Edge ≤79 Firefox 63 IE No Opera Yes Safari No WebView Android Yes Chrome Android Yes Firefox Android 63 Opera Android Yes Safari iOS No Samsung Internet Android Yes
KeyframeEffect() 构造函数
Chrome Yes Edge ≤79 Firefox 63 IE No Opera No Safari No WebView Android Yes Chrome Android Yes Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android Yes
composite Chrome ? Edge ? Firefox 63
Disabled
63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android ? Chrome Android ? Firefox Android 63
Disabled
63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS No Samsung Internet Android ?
getKeyframes Chrome ? Edge ? Firefox 63 IE No Opera No Safari No WebView Android ? Chrome Android ? Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android ?
iterationComposite Chrome ? Edge ? Firefox 63
Disabled
63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android ? Chrome Android ? Firefox Android 63
Disabled
63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS No Samsung Internet Android ?
pseudoElement
Chrome 81
Disabled
81
Disabled
Disabled From version 81: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 81
Disabled
81
Disabled
Disabled From version 81: this feature is behind the Experimental Web Platform Features preference.
Firefox 75 IE No Opera 68
Disabled
68
Disabled
Disabled From version 68: this feature is behind the Experimental Web Platform Features preference.
Safari No WebView Android No Chrome Android 81
Disabled
81
Disabled
Disabled From version 81: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No
setKeyframes
Chrome No Edge No Firefox 63 IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android No
target Chrome ? Edge ? Firefox 63 IE No Opera No Safari No WebView Android ? Chrome Android ? Firefox Android 63 Opera Android No Safari iOS No Samsung Internet Android ?

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅