【问题标题】：How to do a dynamic pulsating button in javascript?如何在javascript中做一个动态脉动按钮？
【发布时间】：2014-03-04 04:46:41
【问题描述】：

我正在尝试让我的按钮从绿色跳动到黑色，然后返回无限循环。这是我第一次使用 @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);

【问题讨论】：

提供您的jsfiddle.net
是的，我的小提琴是在 chrome 上工作的..仅适用于 Firefox 你必须将 webkit 替换为 moz
在jsfiddle 中，您必须选择Frameworks & Extensions -> inhead 下的选项，因此您的代码放在文档的开头，并且无论您在“html”中调用什么函数，它都可以工作。 .
谢谢，现在可以使用了！
，您在第 211 行犯了一个错误：请参阅工作：jsfiddle.net/YX9q5/3

标签： javascript html dom transition css-animations

【解决方案1】：

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

这是一个例子：

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

【讨论】：

不错的动画，这正是我要找的！非常感谢！你介意告诉我为什么我的选择选项 onload() 不起作用：jsfiddle.net/YX9q5

【解决方案2】：

假设你曾在chrome

我看到你给的fiddle，发现了一些错误：

这里我使用-webkit

如果你创建动画，那么你必须使用-webkit- 代替chrome 或safari 对于其他人是-o- 对于opera，对于-moz- 对于Mozilla 和对于IE，您可以直接添加或添加-ms-。

这是我发现的，你在 JavaScript 中只使用 '.animation' 而不是，.webkitAnimation 所以你的动画是行不通的！

而且你的代码格式不好，因为这是javascript，所以它是逐行编译的，所以你必须先附加你的动态style tag然后将你的动画应用到html元素！

WORKING DEMO

希望对你有帮助...

【讨论】：