javascript - 如何在javascript中做一个动态的脉动按钮？

Question

我正在尝试让我的按钮在无限循环中从绿色跳动到黑色并返回。这是我第一次使用@keyframes，我在 CSS 中尝试过并且工作得很好，但是在 javascript 中做它让我有点困惑。我该如何解决这个问题，而且我希望这个按钮通过 javascript 无限跳动，因为该按钮是在 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);

Answer 1

如果您使用 CSS3 规则定义动画，则只需设置按钮的 className 属性即可使用 Javascript 应用此样式。

这是一个例子:

HTML

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

CSS

让我们从为按钮设置基本样式开始:

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

现在定义一个带有闪烁动画的附加类:

.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

现在开始按钮闪烁所需要做的就是将 clickplz 类添加到按钮:

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

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