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

Yes! You separate it into two selectors, one of them with transition: none, then trigger CSS reflow in between to apply the change (otherwise it will be considered as one change and will transition).

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  el.offsetHeight; /* CSS reflow */
  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; }