Geek asks and answers

CSS Transition Only One Conversion Function

Is there a way to animate just one conversion function? For example, I only need to switch to the zoom function. How do i do this?

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

<div class="my-class"></div>
<div class="my-class large"></div>
+3
source share
1 answer

I played a little with your code and YES, you can. Just assign different conversion functions to different classes and use only the classes you want ... like this.

It is important to DO NOT FORGETuse the appropriate browser supported engineswhen using animations to make it work. Here is a list of different browsers that support 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

JSFiddle

, , , . CSS @keyframes, .

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

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

+1

More articles:


All Articles