CODEWITHSUNDEEP
htmlcsstransformtransition
Liky
Liky

Reputation: 107

CSS transition only one transform function

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>

Upvotes: 4

Views: 6827

Answers (1)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

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/

Upvotes: 1

Related Questions