CODEWITHSUNDEEP
jquerycssanimation
Jonny Sooter
Jonny Sooter

Reputation: 2417

CSS transform rotation is not smooth

I have a css transform on a toggle. The transform rotates the image 90 degrees then on toggle rotates it back. Rotating to 90 is nice and smooth but the way back is jumpy. What am I not getting? Here's my code and fiddle with rtc.

CSS:

.rotate1 {
    -webkit-transform: rotate(0deg) translate3d( 0, 0, 0);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}

.rotate2 {
  -webkit-transform: rotate(90deg) translate3d( 0, 0, 0);
     -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

JS:

$("img").on('click', function(){
    $(this).toggleClass("rotate1 rotate2");
});

Upvotes: 0

Views: 2463

Answers (2)

Luke Evers
Luke Evers

Reputation: 73

You forgot to add a class to the image.

<img src="..." class="rotate1" />

Here's an update fiddle: http://jsfiddle.net/bqWLV/1/

Upvotes: 1

Jake
Jake

Reputation: 4899

You are toggling both "rotate1" and "rotate2" to activate and deactivate simultaneously when you invoke toggleClass("rotate1 rotate2").

Instead, add the "rotate1" class to your HTML element and only toggle the "rotate2" class.

Demo

Upvotes: 2

Related Questions