CODEWITHSUNDEEP
javascriptjquerycss
Rasmus
Rasmus

Reputation: 366

CSS transitions - Changing a property without changing the timing

I rotate an image with CSS transitions

img {
    transition:all 5s ease-out;
}

And trigger it with jQuery

$('img').css({'transform':'rotate('+2000+'deg)'});

At some point(s) (randomy) during the rotation I want to change direction of the rotation. The image should continue the current easing and the current duration. Is this possible?

Upvotes: 2

Views: 75

Answers (1)

Scott Murphy
Scott Murphy

Reputation: 136

Have you tried something like this?

div {
  background: red;
  width: 100px;
  height: 100px;
  transition: all 5s ease-out;

}

div.rotateRight {
  transform: rotate(200deg);
}

div.rotateLeft {
  transform: rotate(-200deg);
}

$('div').addClass('rotateRight');

setTimeout(function() {
  $('div').addClass('rotateLeft');
},4000);

https://jsfiddle.net/o3pg8d1d/

Upvotes: 1

Related Questions