0

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,
    });

  }
Daniel Fabre
  • 47
  • 6

1 Answers1

0

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; }
}
JayTailor
  • 26
  • 4
  • well I know how to do this way, but I want to apply it via TS, using a function, at the end of the timer, I want it to change colors, i know how to do it with plain css... The thing is, I don't know how to call this atributes via TS, i can change the color, but how do I animate it? – Daniel Fabre Sep 27 '22 at 12:16