关键帧效果

基线广泛可用

此功能已得到很好的确立，并且可以在许多设备和浏览器版本中使用。它自以下日期起在所有浏览器中可用 2020年3月.

KeyframeEffect 接口是 Web 动画 API 的一部分，它允许我们创建可动画属性和值的集合，称为关键帧。然后可以使用 Animation() 构造函数播放这些关键帧。

构造函数

KeyframeEffect(): 返回一个新的 KeyframeEffect 对象实例，并且还允许您克隆现有的关键帧效果对象实例。

实例属性

KeyframeEffect.target: 获取和设置由该对象进行动画处理的元素或伪元素的源元素。对于不针对特定元素或伪元素的动画，这可能是 null。
KeyframeEffect.pseudoElement: 获取和设置由该对象进行动画处理的伪元素的选择器。对于不针对伪元素的动画，这可能是 null。
KeyframeEffect.iterationComposite: 获取和设置用于解决此关键帧效果的属性值更改的迭代合成操作。
KeyframeEffect.composite: 获取和设置用于解决此关键帧效果和其他关键帧效果之间属性值更改的合成操作属性。

实例方法

此接口从其父级 AnimationEffect 继承了一些方法。

AnimationEffect.getComputedTiming(): 返回此关键帧效果的计算出的当前时间值。
KeyframeEffect.getKeyframes(): 返回构成此效果的计算出的关键帧及其计算出的关键帧偏移量。
AnimationEffect.getTiming(): 返回与包含所有动画时间值的动画关联的对象。
KeyframeEffect.setKeyframes(): 替换构成此效果的关键帧集。
AnimationEffect.updateTiming(): 更新指定的时间属性。

示例

在以下示例中，KeyframeEffect 构造函数用于创建一组关键帧，这些关键帧指示 rofl 表情符号如何在地板上滚动

const emoji = document.querySelector("div"); // element to animate

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // keyframe
    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
  ],
  {
    // keyframe options
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);

// play rofl animation
rollingAnimation.play();

html

<div>🤣</div>

body {
  box-shadow: 0 5px 5px pink;
}

div {
  width: fit-content;
  margin-left: calc(50% - 132px);
  font-size: 64px;
  user-select: none;
  margin-top: 1rem;
}

规范

规范
Web 动画 # the-keyframeeffect-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

构造函数

实例属性

实例方法

示例

规范

浏览器兼容性

另请参阅