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...)

define classes in css and then use addClass removeClass by jquery! — Milad Hosseinpanahi, Sep 01 '13 at 05:25
use classes per http://stackoverflow.com/questions/8568623/trigger-css3-keyframes-using-jquery — DGS, Sep 01 '13 at 05:25

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

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

edited May 23 '17 at 11:43

Community

1
1

answered Sep 01 '13 at 05:31

DGS

6,015
1
21
37

First link broke my styles tnx – Omid Jackson Sep 01 '13 at 05:47
Did you include it properly – DGS Sep 01 '13 at 05:54
Yep Before include: http://kanakh.com/upload/uploads/13780157531.jpg After include: http://kanakh.com/upload/uploads/13780157532.jpg Just write this: – Omid Jackson Sep 01 '13 at 06:10
Ahh ok i would say the problem is that the library is most likely applying translate3d(0, 0, 0) to all the elements to prepare for transitions. Look into the second half of my answer if that is not acceptable. – DGS Sep 01 '13 at 06:18
I don't know how remove webkit http://jsfiddle.net/russelluresti/RHhBz/2/ when remove all the webkit it doesn't work in firefox – Omid Jackson Sep 01 '13 at 06:28
you need to use the vendor prefix `-moz` for firefox – DGS Sep 01 '13 at 06:31

score 0 · Accepted Answer · answered Jun 17 '14 at 12:56

0

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.

answered Jun 17 '14 at 12:56

Jake Cattrall

461
4
20

CSS3 keyframes in JavaScript

2 Answers2