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, why not. In order to do that, you have to actually use only one transform.

This is what is confusing you: you don't apply transform on the element itself. You apply that to the change-state (by means of a pseudo class like :hover or another class using styles that you want in the changed state). Please see @David's comment on your question. You change state for only that property which you want to change and that will animate.

So, effectively you change them selectively based on changed-state.

Solution 1: Using Javascript (based on the fiddle you provided in your question)

Demo: http://jsfiddle.net/abhitalks/6UE28/4/

Relevant CSS:

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

Relevant jQuery:

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5)"
    });
});

// OR 

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "translate(100px, 100px)"
    });
});

// OR

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5) translate(100px, 100px)"
    });
});

Solution 2: Using CSS Only

Demo 2: http://jsfiddle.net/abhitalks/4pPSw/1/

Relevant CSS:

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

div:hover {
    -webkit-transform: scale(0.5);
}

/* OR */

div:hover {
    -webkit-transform: translate(100px, 100px);
}

/* OR */

div:hover {
    -webkit-transform: scale(0.5) translate(100px, 100px);
}