Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS transition only one transform function

CSS transition only one transform function

Problem

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

Problem courtesy of: Liky

Solution

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

// only scale function
// only rotate function
// 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/

Solution courtesy of: Nikhil Nanjappa

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS transition only one transform function

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×