CODEWITHSUNDEEP
animationcsstransformtransition
Richard
Richard

Reputation: 43

CSS3 Transform objects position without Transition applied

I'm looking for a simple way to take an object and transform its rotateY property without it animating to its pre-set transition.

It would look a little like:

$(this).css("-webkit-transform","rotateY(180deg)");
$(this).css("-webkit-transition","10s");

then later in the code

$(this).css("-webkit-transform","rotateY(0)");
$(this).css("-webkit-transition","0");

But the above doesn't quite work for me due to the fact that it needs to set and reset the transitions animation timing.

I need a solution that simply takes the object from point a to b without any fuss. I cant seem to find a way to set the rotateY property without going through the transition/transform prefix.

Any help would be great, thanks in advance.

Upvotes: 2

Views: 1301

Answers (2)

user1076821
user1076821

Reputation:

What you need sounds like CSS3 animations.

So... in your case because you want the animation to be in it's finished point, your code would look like this

$(this).css("-webkit-animation", "someanimation 10s forwards");

The forwards property in a CSS3 animation assures that the end point in your animation is a permanent rendered style, so the animation will stay in its end state until you unload the page.

In your CSS, you would have to add

@-webkit-keyframes someanimation { <br />
    0% {-webkit-transform: rotateY(180deg);} <br />
    100% {-webkit-transform: rotateY(0deg);} <br />
}

This code above isn't particular to any class or ID. It's it's own section.

Here's some documentation on CSS3 animations W3C Standard

And here's an article Smashing Mag

Upvotes: 1

Rohit Kumar
Rohit Kumar

Reputation: 2031

Here it is what you want -

http://jsfiddle.net/rq0574yz/2/

I have added a 'S' and set border-right: 5px solid red, so that you can see that it actually comes back to its initial position without transition. Actually it comes with transition but in the keyframe I have shortened the particular transition duration to few milliseconds (20 milliseconds) so that user does not recognize and thinks it rotated back in no time.

Upvotes: 0

Related Questions