使用没有开始和结束偏移的关键帧的角度属性指令

Question

我尝试构建一个属性指令，该指令应在每次更新时突出显示列表中的项目。列表中项目的背景颜色可能会有所不同，这对我造成了问题。我想使用有角度的关键帧，但不提供元素的初始/最终颜色，而只是提供突出显示的颜色。

当我仅使用纯CSS时，这似乎可以很好地工作：

.box {
  height: 200px;
  width: 200px;
  background: blue;
  animation-name: myanimation;
  animation-duration: 4s;
}

@keyframes myanimation {
  50% {background: green};
}

但是，我不确定在Angular中构建指令时该怎么做。我目前正在使用AnimationBuilder，我的代码如下所示：

export class AppComponent implements OnInit {
@ViewChild('secondBox', {static: true}) myBox: ElementRef;

initColor = "red";
color = "blue";

constructor(private builder: AnimationBuilder) {}


  ngOnInit() {
        this.createAnimation();
  }

  private activated(): AnimationMetadata[] {
    return [
      animate(
        4000,
        keyframes([
          // I wish I did not have to provide an initial color.
          style({ background: this.initColor, offset: 0 }),
          style({ background: this.color, offset: 0.5 }),
          style({ background: this.initColor, offset: 1 })
        ])
      )
    ];
  }

  createAnimation() {
    const factory = this.builder.build(this.activated());
    const player = factory.create(this.myBox.nativeElement);
    player.play();
  }
}

请查看我的演示-https://stackblitz.com/edit/angular-tpjg8j

有什么办法可以避免偏移量0和偏移量1，还是有另一种方法可以用来构建指令？