animation - CSS3 Transform objects position without Transition applied -


i'm looking simple way take object , transform rotatey property without animating pre-set transition.

it little like:

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

then later in code

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

but above doesn't quite work me due fact needs set , reset transitions animation timing.

i need solution takes object point b without fuss. cant seem find way set rotatey property without going through transition/transform prefix.

any great, in advance.

what need sounds css3 animations.

so... in case because want animation in it's finished point, code this

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

the forwards property in css3 animation assures end point in animation permanent rendered style, animation stay in end state until unload page.

in css, have add

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

this code above isn't particular class or id. it's it's own section.

here's documentation on css3 animations w3c standard

and here's article smashing mag


Comments