API 参考手册
API > @angular/animations

keyframes

可定义一组动画样式，每个样式都关联着一个可选的 offset 值。

Defines a set of animation styles, associating each style with an optional offset value.

      
      keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata
参数
steps AnimationStyleMetadata[]

一组带有可选的偏移（offset）数据的动画样式。 这个可选的 offset 值为相应的样式指定一个相对于总体动画时间的百分比，决定何时应用此样式。

A set of animation styles with optional offset data. The optional offset value for a style specifies a percentage of the total animation time at which that style is applied.

返回值

一个封装关键帧数据的对象。

AnimationKeyframesSequenceMetadata: An object that encapsulates the keyframes data.

使用说明

和 animate() 调用一起使用。关键帧动画不会直接在当前状态和目标状态之间应用动画，而是描述在动画弧线的哪个时间点上应用哪个样式。 详情参见 CSS 关键帧动画。

Use with the animate() call. Instead of applying animations from the current state to the destination state, keyframes describe how each style entry is applied and at what point within the animation arc. Compare CSS Keyframe Animations.

用法

Usage

下面的例子中，偏移值描述了每个 backgroundColor 值应该何时应用上去。开始时的颜色是红色，在总时间的 20% 处变为蓝色。

In the following example, the offset values describe when each backgroundColor value is applied. The color is red at the start, and changes to blue when 20% of the total time has elapsed.

// the provided offset values animate("5s", keyframes([ style({ backgroundColor: "red", offset: 0 }), style({ backgroundColor: "blue", offset: 0.2 }), style({ backgroundColor: "orange", offset: 0.3 }), style({ backgroundColor: "black", offset: 1 }) ]))
      
      // the provided offset values
animate("5s", keyframes([
  style({ backgroundColor: "red", offset: 0 }),
  style({ backgroundColor: "blue", offset: 0.2 }),
  style({ backgroundColor: "orange", offset: 0.3 }),
  style({ backgroundColor: "black", offset: 1 })
]))

如果没有指定 offset 值，则会自动计算偏移量。

If there are no offset values specified in the style entries, the offsets are calculated automatically.

animate("5s", keyframes([ style({ backgroundColor: "red" }) // offset = 0 style({ backgroundColor: "blue" }) // offset = 0.33 style({ backgroundColor: "orange" }) // offset = 0.66 style({ backgroundColor: "black" }) // offset = 1 ]))
      
      animate("5s", keyframes([
  style({ backgroundColor: "red" }) // offset = 0
  style({ backgroundColor: "blue" }) // offset = 0.33
  style({ backgroundColor: "orange" }) // offset = 0.66
  style({ backgroundColor: "black" }) // offset = 1
]))