CODEWITHSUNDEEP
javascripthtmldomtransitioncss-animations
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

How to do a dynamic pulsating button in javascript?

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

Upvotes: 1

Views: 2963

Answers (2)

r3mainer
r3mainer

Reputation: 24567

If you define the animation with CSS3 rules, then you can use Javascript to apply this style simply by setting the button's className attribute.

Here's an example:

HTML

<p><button id="btn1">Buy Now!</button></p>

CSS

Let's start by setting up a basic style for the button:

button {
    color:#696;
    font-weight:bold;
    font-size:16pt;
    border:4px outset #070;
    border-radius:1em;
    background-color:#000;
    padding:0.3em 1em;
}

Now define an additional class with the flashing animation:

.clickplz {
    animation:btn 2s;
    -webkit-animation:btn 2s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}

@keyframes btn  {
    0%   {color:#8c8; background-color:#000; text-shadow:0 0 9px rgba(255,255,144,0);}
    50%  {color:#fff; background-color:#0b0; text-shadow:0 0 9px rgba(255,255,144,0.75);}
    100% {color:#8c8; background-color:#000; text-shadow:0 0 9px rgba(255,255,144,0);}
}

@-webkit-keyframes btn {
    0%   {color:#8c8; background-color:#000; text-shadow:0 0 9px rgba(255,255,144,0);}
    50%  {color:#fff; background-color:#0b0; text-shadow:0 0 9px rgba(255,255,144,0.75);}
    100% {color:#8c8; background-color:#000; text-shadow:0 0 9px rgba(255,255,144,0);}
}

Javascript

Now all you need to do to start the button flashing is add the clickplz class to the button:

document.getElementById('btn1').className='clickplz';

▶ Here's a JSFiddle page containing all of the above

Upvotes: 3

Ash
Ash

Reputation: 1422

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

Upvotes: 1

Related Questions