CSS Transition for only one type of transform?

Question

Is it possible to animate (using transitions) only one type of css transform?

I have css:

cell{
  transform: scale(2) translate(100px, 200px);
  tran         


        

Answer 1

Instead of forcing a reflow, you can instead use setTimeout.

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  setTimeout(function() {el.classList.add('moved');})
});

#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }