4

I need to create and run custom css3 animation with javascript. When I need to create transition I write something like this:

element.style[Modernizr.prefixed('transform')] = 'rotateY(50deg)';

When I need animate element I should write

element.style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

But I can't create keyframe for 'open' in the same way. Sure, I may write something like 

document.creteElement("style").innerHTML = rule;

but this is dirty idea, so after reading programmatically changing webkit-transformation values in animation rules I write this:

var style = document.documentElement.appendChild(document.createElement("style")),
index = Modernizr._prefixes.length,
rule = "";

while(index--){
    rule+="@"+Modernizr._prefixes[index]+"keyframes 'test'{ 0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} ";
}

style.sheet.insertRule(rule);
$(".mojo")[0].style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

​

and get error: Uncaught Error: SYNTAX_ERR: DOM Exception 12

What I am doing wrong and how may I do this more appropriate way? This look horrible.

http://jsfiddle.net/silentimp/273e2/ — test

Community
  • 1
  • 1
SilentImp
  • 1,865
  • 1
  • 18
  • 28
  • http://jsfiddle.net/silentimp/273e2/1/ — solution – SilentImp Mar 19 '12 at 22:17
  • I like this solution a lot. I'd like to see it taken further, maybe abstracted into a function that allowed you easy access to your `CSSKeyframeRules` in a way that allowed for get/set on the fly. – bodine Jul 29 '12 at 00:41

1 Answers1

0
var keyframes = "@-webkit-keyframes{...}";
var s = document.createElement( 'style' );
s.innerHTML = keyframes;

source

or

https://github.com/krazyjakee/jQuery-Keyframes

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
vovkas
  • 1,091
  • 10
  • 21
  • Got the error like: `Failed to load resource: The requested URL was not found on this server. file:///Users/ks/Desktop/website/undefined` – Darius Miliauskas Dec 08 '14 at 01:34