Animate Transform Only One Property (Scale) Override Other (Translate)

CSS Transition for only one type of transform?

Yes! Now you can, because translate, scale and rotate have been moved to a separate css properties! (MDN: translate, scale, rotate)

So now you can do:

div{
   scale: 1;
   translate: 0;

   transition: scale 0.4s;
}

div.clicked{
   scale: 2;
   translate: 100px 200px; 
}

Example: http://jsfiddle.net/bjkdthr5/1/ (only scale will animate)

css transform without overwriting previous transform?

CSS custom properties aka CSS variables are the only answer to this (outside of using Javascript).

To add to a previous value:

div {
  --translateX: 140;
  --trans: calc(var(--translateX) * 1px);
  transform: translateX(var(--trans)) scale(1.5);
}

div:hover {
  
 --translatemore: calc(var(--translateX) + 25);
 --trans: calc(var(--translatemore) * 1px);
}

div {
  transition: .2s transform;
  width: 50px;
  height: 50px;
  background: salmon;
}

All browsers now support the ability to set transform properties individually.

https://caniuse.com/mdn-css_properties_translate
https://caniuse.com/mdn-css_properties_scale

css transform-property translate separately

@-webkit-keyframes animIn
{
0%   {-webkit-transform:translateX(-1920px) scale(0.8);opacity:0;}
1%   {-webkit-transform:translateX(-1920px) scale(0.8);opacity:1;}
33%  {-webkit-transform:translateX(-1920px) scale(0.8);opacity:1;}
66%  {-webkit-transform:translateX(0px)     scale(0.8);opacity:1;}
100% {-webkit-transform:translateX(0px)     scale(1.0);opacity:1;}
}

The answer was to switch to an animation approach.

CSS transition only one transform function

I played around with your code a little and YES you can. Just assign the different transform functions to different classes and use only those classes that you want...like so.

Importantly DO NOT FORGET to use the respective browser supported engines when using animations to make it work. Here is a list of various browsers supporting various animation features.

http://css3.bradshawenterprises.com/support/

.my-class {
    transition: transform;
}

.scale_and_rotate {
    -webkit-transform: scale(2) rotate(90deg);
    -moz-transform: scale(2) rotate(90deg);
    -ms-transform: scale(2) rotate(90deg);
    -o-transform: scale(2) rotate(90deg);    
}

.scale_class {
    -webkit-transform: scale(2); // Safari and Chrome(Engine:-Webkit)
    -moz-transform: scale(2); // Mozilla(Engine:-Gecko)
    -ms-transform: scale(2); // IE(Engine:-Trident)
    -o-transform: scale(2); // Opera(Engine:-Presto)
}

.rotate_class {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

and finally you can apply these classes depending on your requirements

<div class="my-class"></div>
<div class="my-class scale_class"></div> // only scale function
<div class="my-class rotate_class"></div> // only rotate function
<div class="my-class scale_and_rotate"></div> // both scale and rotate function

Check the JSFiddle here

If you want to scale and rotate together then the class given by you should work.
And also you can look into CSS @keyframes to achieve this. Here are few good tutorials

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

How to apply multiple transforms in CSS?

You have to put them on one line like this:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

When you have multiple transform directives, only the last one will be applied. It's like any other CSS rule.

Keep in mind multiple transform one line directives are applied from right to left.

This: transform: scale(1,1.5) rotate(90deg);
and: transform: rotate(90deg) scale(1,1.5);

will not produce the same result:

.orderOne, .orderTwo {

  font-family: sans-serif;

  font-size: 22px;

  color: #000;

  display: inline-block;

}

.orderOne {

  transform: scale(1, 1.5) rotate(90deg);

}

.orderTwo {

  transform: rotate(90deg) scale(1, 1.5);

}

<div class="orderOne">

  A

</div>

<div class="orderTwo">

  A

</div>

Why when I use transform scale it moves the animated div's position

In declaraing transform : scale(1.5); you're overriding transform: translate(-50%, -50%);, so transform: scale(1.5) is the equivalent of transform: translate(0, 0) scale(1.5).

Instead, you need to stack your transform values so the translate is maintained. The keyframe animation becomes:


  @keyframes popAnim{
    0%{
      transform : translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }
    100%{
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }