Angular 角度5动画：关键帧的自定义（非线性）动画计时功能

要求是创建具有自定义计时功能的动画。它可以通过css定义如下：

animation: text-animation 10s steps(50) 1s 1 normal both;

@keyframes text-animation {
  0% {
    width: 0;
  }
  100% {
    width: 50em;
  }
}

对于线性动画功能，可以按如下方式呈现相同的动画

animations: [
    trigger("textAnimation", [
      transition(":enter", [
        query(":self", [
          animate(
            "10s",
            keyframes([
              style({
                width: "0",
              }),
              style({
                width: "50em",
              })
            ])
          )
        ])
      ])
    ])
  ]

将上述函数更改为

animate(
  "10s steps(50) 1s 1 normal both",
  keyframes([
    style({
      width: "0",
    }),
    style({
      width: "50em",
    })
  ])
)

---

不会产生任何结果，除了错误“提供的计时值无效”

请保留正式语法，它将工作…2trichetriche。你是什么意思？有很多，你应该遵循它。不过都是为了线性动画。正如我所说，它工作完美无瑕。我需要步进（动画功能）一个。如前所述，您可以使用

offset

步进动画。