How to do a dynamic pulsating button in javascript?


Tags: javascript,html,dom,transition,css-animations

Problem :

I am trying to make my button pulsate from green to black and back in the an infinite loop. It is my first time working with @keyframes, I tried in CSS and worked perfectly, but doing it in javascript puzzles me a bit. How do I fix this and also I want this button to be infinitely pulsating through javascript since the button was dynamically created in javascript.

// create an input element
var frm = document.getElementById("result");
var submitBtn = document.createElement("input");
submitBtn.type = "submit";
submitBtn.value = "Confirm Purchase";
frm.appendChild(submitBtn);
submitBtn.style.animation = "pulse 5s infinite";

var cssAnimation = document.createElement('style');
 cssAnimation.type = 'text/css';
var rules = document.createTextNode('@keyframes pulse {'+
'from { background-color:green; }'+
 '80% { background-color:black; }'+
'90% { background-color:green; }'+
'to { background-color:back; }'+
'}');
cssAnimation.appendChild(rules);
//document.getElementsByTagName("head")[0].appendChild(cssAnimation);
submitBtn.appendChild(cssAnimation);


Solution :

Assume you worked in chrome

I see your given fiddle,And found some errors:

Here I use -webkit

If you create animation then you must have to use -webkit- for chrome or safari and for others are -o- for opera, -moz- for Mozilla and for IE you can directly add or add -ms-.

Here what i find that , You use only '.animation' in JavaScript rather then , .webkitAnimation So your animation isn't work!

And Your code is not formatted well,As this is javascript ,So it Compile line by line,So you have to first append your dynamic style tag then apply your animation to html element !

WORKING DEMO

May this will help you...


    CSS Howto..

    How to add JS and CSS to all content parts in an Orchard module

    How can I use jQuery (or CSS) to sort HTML tables by column?

    How to get two CSS rating star widgets to not affect each other when clicked

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    CSS - How to make overflow hidden on the right but not the left? [duplicate]

    How to center dropdown menu under parent tab?

    How to draw a dotted line with css?

    PNG background image not showing in IE 8< using html5?

    In a 3 column grid of a varying number of elements, how to select only the elements that appear on the last line using CSS

    How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

    How to change background image with static css and maintain it?

    How to make this image blur with css

    How to restrict Visual Studio 2012.2 from generating .css files in LESS editor?

    CSS: How to refer to a tag

    How do i remove li element margin

    How can I get a div just inside an input at 0% and 100%?

    How to minify and combine commented out css files

    How to draw image dynamically on a canvas line between two cells

    How to override CSS in joomla template

    How to link CSS file from css folder in wordpress

    How to see the style of the thumb of range input in Chrome developer tools?

    How to generate assets that match the html file of a rails application?

    How to correctly add nested divs

    How to clip inside a box in css?

    How to paste a style sheet into a new document window in a Rally app

    Contact page Design how to add Bootstrap

    How can i scroll to specific ID using Header?

    How can I insert new text with a hyperlink into a page in CSS?

    How can I dynamically resize a DIV element's width to fit its text content?

    How to get floated divs align to the top?