Animation of css on Angular typescript

Question

So i'm trying to add some css animations on a function. When the timer hits it's ends it opens a snack bar and I want to make the color of the timer to keep changing from white to red, as warning. I've made it change it to red at the end of the timer, but I don't know how to call animations on typescript

    openSnackBar2() {
    const timer = document.getElementById('timer')
    if(timer != null){
      timer.style.color = 'red'
    }
    this.snack.open('O tempo para separar os membros das equipes de dicas acabou, todo tempo adicional utilizado vai consequentemente descontar pontos de toda equipe!', 'Alerta', {
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
    });

  }

JayTailor · Answer

You can use custom snack bar component together with CSS animations to apply loop animations.

p {
  animation: color-change 1s infinite;
}

@keyframes color-change {
  0% { color: white; }
  100% { color: red; }
}

Animation of css on Angular typescript

1 Answers