Html CSS旋转圆动画onClick在多次运行时会变得不稳定

我有一个CSS动画，它使用带有变换旋转的关键帧进行旋转

它在第一次运行时工作得很好-但是如果您使用添加旋转类的onclick多次运行动画，它会随着时间的推移变得越来越复杂。 下面是一些代码，在JSFIDLE中有指向它的链接：

    <div class="row numRandoms">
         <h3>Winning Numbers:</h3>
         <div class="ball pickedIndex0" ></div>
         <div class="ball pickedIndex1" ></div>
         <div class="ball pickedIndex2" ></div>
         <div class="ball pickedIndex3" ></div>
    </div>

    .ball {
    float: left;
    display: block;
    width: 150px;
    height: 150px;
    margin: 20px;
    font-size: 4em;
    color: black;
    padding-top: 3.5%;
    text-align: center;
    vertical-align: middle;
    background-color: white;
    border-radius: 50%;
    box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
    background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%,     transparent 100%);
    background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
    background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
    background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}
.spin {
        -webkit-animation: spin 2s linear infinite;
        -moz-animation: spin 2s linear infinite;
        -o-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }}
@-moz-keyframes spin {
    from {
        -moz-transform:rotate(0deg);
    }
    to {
        -moz-transform:rotate(360deg);
    }}
@-o-keyframes spin {
    from {
        -o-transform:rotate(0deg);
    }
    to {
        -o-transform:rotate(360deg);
    }}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }}

中奖号码：
.球{
浮动：左；
显示：块；
宽度：150px；
高度：150像素；
利润率：20px；
字号：4em；
颜色：黑色；
垫面：3.5%；
文本对齐：居中；
垂直对齐：中间对齐；
背景色：白色；
边界半径：50%；
盒影：插入-25px-25px-40px rgba（0,0,0,5）；
背景图像：-webkit线性渐变（-45度，rgba（255255220.3）0%，透明100%）；
背景图像：-moz线性梯度（-45度，rgba（255255220.3）0%，透明100%）；
背景图像：-o-线性梯度（-45度，rgba（255255220，.3）0%，透明100%）；
背景图像：-ms线性梯度（-45度，rgba（255255220.3）0%，透明100%）；
}
.旋转{
-webkit动画：旋转2s线性无限；
-moz动画：自旋2s线性无限；
-o动画：自旋2s线性无限；
动画：旋转2s线性无限；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
}}
@-moz关键帧旋转{
从{
-moz变换：旋转（0度）；
}
到{
-moz变换：旋转（360度）；
}}
@-o-关键帧旋转{
从{
-o变换：旋转（0度）；
}
到{
-o变换：旋转（360度）；
}}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}}

您可以在这里找到简单的代码：

您可以在这里看到它在现场工作：

我无法判断javascript的其他方面是否导致了性能下降，或者动画中是否存在某些固有的问题，使其无法正常工作

---

我正在使用最新的chrome浏览器进行测试。

您的代码似乎运行得非常好。您遇到的问题可能是由于internet连接速度慢造成的。如果是这样的话，你仍然应该尝试优化你的网站，因为很多人会在农村地区或无线互联网连接速度较慢的地方体验到这种起伏的动画。这里有一些事情可能会减慢你的网站

Bootstrap、Bootstrap.js和jQuery都在本地加载，尽管它们都有CDN。你应该改变

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

到

及

到

出于安全原因，完整性/跨源信息非常重要。 另一件事是您的page.js和styles.css文件都很大，您可能应该这样做

你可以做很多事情来优化你的网站。以下是一些可以帮助您解决问题的网站：

---

示例代码工作得很好，但项目没有。已部署的版本现在已使用我的修复程序更新。这个问题在项目中更为严重——我无意中创建了两个超时，但它们不能很好地协同工作。我重构了代码，只使用了1次超时，解决了问题。

您的代码看起来不错。抱歉，我无法在您的JSFIDLE中重现Windows 10上Firefox中的“断断续续”。我尝试通过

classList添加spin类。添加（“spin”）

和

className+=“spin”

；两个动画都很流畅。@Jeremy——在JSFIDLE中看不到这种起伏，这让我意识到这不是CSS问题，而是javascript代码的问题。我重构了代码，发现了一个同步问题，有两个不同的超时，当我重新构造它，使它只有1个时，它就平滑了。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/css" rel="stylesheet">

<script src="js/jquery-2.2.2.min.js">
<script src="js/bootstrap.min.js">

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>