CSS3 keyframes in JavaScript

Question

Is it possible using animation keyframes in JavaScript? If your answer is no, please tell me how can I use codes like this? I wrote my jQuery plugin but I don't know how can I use keyframes. animate() doesn't work (translateZ...)

Answer 1

Here is a third party library that allows for a variety of different translations.

http://ricostacruz.com/jquery.transit/

If that still doesnt so what you need you can refer to this question

Set Webkit Keyframes Values Using Javascript Variable

which will show you how to inject rules into the CSSOM dynamically using jQuery

Somewhat working fiddle for Firefox

uses

@keyframes rotate {
    0% {-moz-transform: rotate(-10deg);}
    100% {-moz-transform: rotate(-10deg);}
}

and other vendor prefix specifics. There seems to be some kind of problem where sometimes the animation will trigger but other times it wont. Haven t been able to figure out why

Answer 2

You first need to research css3 keyframes then maybe make a small example for yourself to get a basic understanding. jQuery.Keyframes allows you to generate css3 keyframes and attach events on the fly with javascript.