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– Milad Hosseinpanahi2013-09-01 05:25:00 +00:00Commented Sep 1, 2013 at 5:25
-
use classes per stackoverflow.com/questions/8568623/…DGS– DGS2013-09-01 05:25:32 +00:00Commented Sep 1, 2013 at 5:25
-
I want to change keyframes valuesOmid Jackson– Omid Jackson2013-09-01 05:28:06 +00:00Commented Sep 1, 2013 at 5:28
Add a comment
|
2 Answers
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.
Comments
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
6 Comments
Omid Jackson
First link broke my styles tnx
DGS
Did you include it properly
Omid Jackson
Yep Before include: kanakh.com/upload/uploads/13780157531.jpg After include: kanakh.com/upload/uploads/13780157532.jpg Just write this: <script src="../jquery.transit.min.js"></script>
DGS
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.
Omid Jackson
I don't know how remove webkit jsfiddle.net/russelluresti/RHhBz/2 when remove all the webkit it doesn't work in firefox
|