Menu
Is there any way to set the from or to of a webkit-keyframe with JavaScript?
649
A solution of sorts:
var cssAnimation = document.createElement('style'); cssAnimation.type = 'text/css'; var rules = document.createTextNode('@-webkit-keyframes slider {'+ 'from { left:100px; }'+ '80% { left:150px; }'+ '90% { left:160px; }'+ 'to { left:150px; }'+ '}'); cssAnimation.appendChild(rules); document.getElementsByTagName("head")[0].appendChild(cssAnimation); Just adds a style definition to the header. Would be much cleaner/better to define it though the DOM if possible.
Edit: Error in Chrome with old method
119
You can use the CSS DOM interface. For instance:
<html> <body> <style> @keyframes fadeout { from { opacity:1; } to { opacity:0; } } </style> <script text="javascript"> var stylesheet = document.styleSheets[0]; var fadeOutRule = stylesheet.cssRules[0]; alert( fadeOutRule.name ); // alerts "fadeout" var fadeOutRule_From = fadeOutRule.cssRules[0]; var fadeOutRule_To = fadeOutRule.cssRules[1]; alert( fadeOutRule_From.keyText ); // alerts "0%" ( and not "from" as you might expect) alert( fadeOutRule_To.keyText ); // alerts "100%" var fadeOutRule_To_Style = fadeOutRule_To.style; alert( fadeOutRule_To_Style.cssText ); // alerts "opacity:0;" fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity alert( fadeOutRule_To_Style.cssText ); // alerts "color:red;" </script> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
