如何使@keyframes动画适用于IE和Firefox？

Question

我正在努力使css关键帧动画在所有浏览器中都能正常运行。到目前为止，它在Chrome和Safari中运行良好。我使用警报告诉哪个浏览器正在使用，所有弹出警报框，IE除外。除此之外，firefox会弹出警告对话框，但不会执行css动画。我为IE指定了-ms-，为Firefox指定了-moz-，为Chrome和Safari指定了-webkit-。 Firefox和IE无法正常工作，我不确定问题出在哪里。

其次，我想知道如何在onmouseover submitBtn和resume onmouseout期间停止/暂停@keyframes动画。谢谢！ JSFiddle Here

JavaScript代码：

/*
 * Source: http://mrbool.com/how-to-detect-different-browsers-and-their-versions-using-javascript/25424#ixzz2v0Off3TV
 * Purpose: How to detect different browsers and their versions using JavaScript
 */

var objappVersion = navigator.appVersion;
var objAgent = navigator.userAgent;
var objbrowserName  = navigator.appName;
var objfullVersion  = '' + parseFloat(navigator.appVersion);
var objBrMajorVersion = parseInt(navigator.appVersion,10);
var objOffsetName,objOffsetVersion,ix;

// create style element and produce animation
var cssAnimation = document.createElement('style');
//cssAnimation.type = 'text/css';
//cssAnimation.innerHTML = "@-webkit-keyframes pulse { 100% { background-color:green;color:black; } 50% {background-color:white;color:black;} 0% { background-color:green;color:black; } }";
document.head.appendChild(cssAnimation);
// cssAnimation.appendChild(rules);


var frm = document.getElementById("result");
var submitBtn = document.createElement("input");
submitBtn.type = "submit";
submitBtn.value = "Confirm Purchase";
frm.appendChild(submitBtn);
//submitBtn.style.webkitAnimation = "pulse 1s infinite";
// In Chrome
if((objOffsetVersion = objAgent.indexOf("Chrome")) != -1) 
{
    objbrowserName = "Chrome";
    objfullVersion = objAgent.substring(objOffsetVersion + 7);

    // add animation @-webkit-keyframes for Chrome
    cssAnimation.innerHTML = "@-webkit-keyframes pulse { 100% { background-color:green;color:white; } 50% {background-color:white;color:black;} 0% { background-color:green;color:white; } }";
    document.head.appendChild(cssAnimation);
    submitBtn.style.webkitAnimation = "pulse 1s infinite";
    alert("This is Chrome!");
}
// In Microsoft internet explorer
else if((objOffsetVersion = objAgent.indexOf("MSIE")) != -1) 
{
    objbrowserName = "Microsoft Internet Explorer";
    objfullVersion = objAgent.substring(objOffsetVersion + 5);
    // add animation @-ms-keyframes for IE
    cssAnimation.innerHTML = "@-ms-keyframes pulse { 100% { background-color:green;color:white; } 50% {background-color:white;color:black;} 0% { background-color:green;color:white; } }";
    document.head.appendChild(cssAnimation);
    submitBtn.style.msAnimation = "pulse 1s infinite";
    alert("This is IE!");
}
// In Firefox
else if((objOffsetVersion = objAgent.indexOf("Firefox")) !=- 1) 
{
    objbrowserName = "Firefox";

    // add animation @-moz-keyframes for Firefox
    cssAnimation.innerHTML = "@-moz-keyframes pulse { 100% { background-color:green;color:white; } 50% {background-color:white;color:black;} 0% { background-color:green;color:white; } }";
    document.head.appendChild(cssAnimation);
    submitBtn.style.mozAnimation = "pulse 1s infinite";
    alert("This is Firefox!");
}
// In Safari
else if((objOffsetVersion=objAgent.indexOf("Safari")) != -1) 
{
    objbrowserName = "Safari";
    objfullVersion = objAgent.substring(objOffsetVersion + 7);
    // add animation @-webkit-keyframes for Safari
    cssAnimation.innerHTML = "@-webkit-keyframes pulse { 100% { background-color:green;color:white; } 50% {background-color:white;color:black;} 0% { background-color:green;color:white; } }";
    document.head.appendChild(cssAnimation);
    submitBtn.style.webkitAnimation = "pulse 1s infinite";
    alert("This is Safari!");
}

submitBtn.onmouseover = function()
{
    submitBtn.style.transition = "ease-in-out all .4s";
    submitBtn.style.backgroundColor = "white";
    submitBtn.style.color = "green";
}
submitBtn.onmouseout = function()
{
    submitBtn.style.transition = "ease-in-out all .4s";
    submitBtn.style.backgroundColor = "white";
    submitBtn.style.color = "black";
}