CSS Transition for only one type of transform?

Solution 1:

No! you cannot use transition only for certain value of transform like scale(2).

One possible solution would be as follows: (sorry, you have to use additional html)

HTML

<div class="scale">
<div class="translate">
Hello World
</div>
</div>

CSS

div.scale:hover {
    transform: scale(2);
    transition: transform 0.25s;
}
div.scale:hover div.translate {
    transform: translate(100px,200px);
}

Solution 2:

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; }

<div id="el"></div>