Problema com onclick

A ideia é o JS apenas adicionar a classe, e aí o CSS aplicar a animação com base nessa classe (usando transition).

Se a classe tá sendo aplicada no HTML, entao é provavel que o problema esteja no CSS...

Sim, consegui encontrar o erro e era realmente no CSS. porém ainda não entendi como a animação funciona.

Eu coloquei em meu elemento que ele possui uma animação um transition e etc, só que ainda não entendi quando e onde é "disparado" o play...

o elemento inicia a animação logo quando entra no html? é isso?

Exato, a animação inicia quando o elemento entra no HTML. Alguns cenarios pra pensar:

• Se o elemento ja ta no html e o css ja ta aplicado, a animacao inicia quando a pagina carrega.

• Se o elemento é criado em JS e inserido na pg, a animacao comeca qdo ele é inserido.

• Se o elemento ja ta no HTML mas o CSS só é aplicado depois, a animacao comeca quando o CSS é aplicado nele. Esse é o caso quando voce, via JS, aplica uma classe CSS com transition; a animacao dispara quando a classe é aplicada.