{{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect()")}}, 和 {{domxref("KeyframeEffect.setKeyframes()")}} 都接受格式为一组关键帧的对象，这种格式有以下几种选项。

关键帧格式有两种不同的方式：

一个由多个关键帧的属性和值组成的对象所构成的数组。这是{{domxref("KeyframeEffect.getKeyframes()", "getKeyframes()")}}方法返回的规范格式。
```
element.animate([
  { // from
    opacity: 0,
    color: "#fff"
  },
  { // to
    opacity: 1,
    color: "#000"
  }
], 2000);
```
对每个关键帧的偏移可以通过提供一个offset来指定。
```
element.animate([ { opacity: 1 },
                  { opacity: 0.1, offset: 0.7 },
                  { opacity: 0 } ],
                2000);
```
提示: offset 的值必须是在[0.0, 1.0]这个区间内，且须升序排列。

并非所有的关键帧都需要设置offset。没有指定offset的关键帧将与相邻的关键帧均匀间隔。

可以通过提供easing过渡来给指定关键帧之间应用过渡效果，如下所示：
```
element.animate([ { opacity: 1, easing: 'ease-out' },
                  { opacity: 0.1, easing: 'ease-in' },
                  { opacity: 0 } ],
                2000);
```
在这个例子中，指定的easing仅适用于指定它的关键帧到下一帧之间。但是在options中指定的 easing 值都将应用在一个动画的整个持续时间里。
一个包含key-value键值的对象需要包含动画的属性和要循环变化的值数组。
```
element.animate({
  opacity: [ 0, 1 ],          // [ from, to ]
  color:   [ "#fff", "#000" ] // [ from, to ]
}, 2000);
```
使用这种格式，每个数组的元素数量不必相等。所提供的值将独立分开。
```
element.animate({
  opacity: [ 0, 1 ], // offset: 0, 1
  backgroundColor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1
}, 2000);
```
特殊键offset，easing和composite（如下）可以与属性值一起指定。
```
element.animate({
  opacity: [ 0, 0.9, 1 ],
  offset: [ 0, 0.8 ], // [ 0, 0.8, 1 ] 的简写
  easing: [ 'ease-in', 'ease-out' ],
}, 2000);
```
从属性值列表生成一组合适的关键帧后，每个提供的偏移量将应用于相应的关键帧。如果值不足或者列表包含空值null，则以没有指定处理（即和上面第1种数组格式的一样均匀间隔）.

如果easing 或composite 值太少，将根据需要，重复相应的列表。

属性

关键帧可以为任何的css动画属性指定 property-value 。使用 camel-case 的属性名将变为 camelCase 格式，例如 {{cssxref("background-color")}} 变成 backgroundColor ，再如 {{cssxref("background-position-x")}} 变成 backgroundPositionX.。速记词，例如 {{cssxref("margin")}} 也是可以用的。.

两个特色的css属性：

{{cssxref("float")}}, 必须写成 cssFloat ，因为"float" 是 JavaScript的保留关键字
{{cssxref("offset")}}, 必须写成 cssOffset ，因为"offset" 表示如下的关键帧 offset

还可以指定以下特色属性：

offset: 关键帧的 offset 偏移量指定为介于0.0和1.0之间的数字或为null。这相当于使用@keyframes在CSS样式表中以百分比指定开始和结束状态。如果此值为null或缺失，则关键帧将在相邻关键帧之间均匀分布。
easing: 从这个关键帧直到这一级中的下一个关键帧所使用的 timing function
composite: {{domxref("KeyframeEffect.composite")}} 操作用于将此关键帧中指定的值与基础值组合在一起。如果正在使用在效果上指定的复合操作，则不会出现这种情况。

语法

属性

规范

浏览器兼容性

相关推荐