CSS transition only one transform function

Question

Is there a way to animate only one transform function? For example i only want my transition on scale function. How will i do this

.my-class {
    transition: transform;
}
.large {
    transform: scale(2) rotate(90deg);
}

<div class="my-class"></div>
<div class="my-class large"></div>

Exactly what you did. (plus vendor prefixes and transition time) What didn't work? — bjb568
– bjb568, Commented Feb 20, 2014 at 6:48
@bjb568 what i acctually want was not to include rotate on my transition since his on transform property. my goal is only scale function on transform property will animate. help — Liky
– Liky, Commented Feb 20, 2014 at 6:54

Nikhil Nanjappa · Accepted Answer · 2014-02-20 12:25:59Z

1

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/

edited Feb 20, 2014 at 12:25

answered Feb 20, 2014 at 7:43

Nikhil Nanjappa

6,6823 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Liky Over a year ago

do you have tried this code on your browser? i think the "both scale and rotate" div is: rotate_class will just override the scale_class' transform property. the scale function will not be executed because it's overridden by the rotate function. sorry i know i cant explain will but i hope you get my point

Nikhil Nanjappa Over a year ago

Oopsie, I forgot to add a class. Have edited the changes just check the fiddle for complete code

Liky Over a year ago

Sorry i also forgot to set the transition value to [transform 2s] and sorry again because I'm not so specific on explaining what i want. Now my main point was for example i have a div with no class and i have a script that will place a class(scale_and_rotate) on it then i only want the transition transform 2 sec on scale function there will be no animation on rotate

Nikhil Nanjappa Over a year ago

Ok then can you please update the question accordingly now so that others can help you out too

Nikhil Nanjappa Over a year ago

And also can you create a fiddle to explain your problem better

Collectives™ on Stack Overflow

CSS transition only one transform function

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related