在此页

• 构造函数
• 特性
• 方法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

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

KeyframeEffect 接口在 Web 动画 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.

范例

在 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
  );
					

规范

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

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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	IE No	Opera No	Safari No	WebView Android ?	Chrome Android ?	Firefox Android 63	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	IE No	Opera No	Safari No	WebView Android ?	Chrome Android ?	Firefox Android 63	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 ?

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• Web 动画 API
• 动画

元数据

• 最后修改： Mar 6, 2020

相关话题

1. Web 动画 API
2. KeyframeEffect
3. 构造函数

   1. KeyframeEffect()
4. 特性

   1. composite
   2. iterationComposite
   3. target
5. 方法

   1. getKeyframes()
   2. setKeyframes()
6. Web 动画相关页面

   1. 动画
   2. AnimationEffect
   3. AnimationEvent
   4. AnimationPlaybackEvent
   5. AnimationTimeline
   6. Document.getAnimations()
   7. Document.timeline
   8. DocumentTimeline
   9. EffectTiming
   10. Element.animate()