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

Question

要求是创建具有自定义定时功能的动画。可以通过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",
    })
  ])
)

没有结果，除了错误“提供的计时值无效” 。