I am trying a simple animation effect of a flipping card using CSS and JS and I tried this approach (that is not working):

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

I tried it either (no success):

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)';

In both cases I don't get any error, it just won't display any transition.

What am I doing wrong here?