Estoy probando un efecto de animación simple de una tarjeta invertida usando CSS y JS y probé este enfoque (que no funciona):

CSS:

 .card { user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; width: 60px; height:60px; text-align:center; border: 0px; background-color: white; border-color: lightgrey; border-style:solid; border-width:2px; border-radius:10%; font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:larger; font-weight: bold; transition: transform 0.5s; } .notransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; }

HTML:

 <div id="card1" class="card">

JS:

 var card = document.getElementById('card1') card.classList.add('notransition'); // disable transition card.style.transform = 'scale(0,1)'; // set xscale = 0 card.classList.remove('notransition'); // reenable transition card.style.transform = 'scale(1,1)'; // animate it to xscale = 1

Lo intenté bien (sin éxito):

 var card = document.getElementById('card1') card.style.transition = 'none'; card.style.transform = 'scale(0,1)'; card.style.transition = 'transform 0.5s'; card.style.transform = 'scale(1,1)';

En ambos casos, no recibo ningún error, simplemente no muestra ninguna transición.

¿Qué estoy haciendo mal aquí?