Question

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

它第一次运行时运行良好 - 但是如果使用添加旋转类的onclick多次运行动画，它会随着时间的推移而变得更加笨拙。这是一些代码，在jsfiddle中有一个链接：

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

您可以在此处找到简单的代码：https://jsfiddle.net/vrhc4vet/

你可以看到它在这里工作：http://lottery-game.marycamacho.com

我无法判断我的javascript的其他方面是否导致了降级，或者动画中是否存在重复它不能正常工作的内容。

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

Answer 1

看起来你的代码工作得非常好。您遇到的问题可能是因特网连接速度缓慢造成的。如果是这样，你仍然应该尝试优化你的网站，因为很多人会在农村地区或通常有慢速无线互联网连接的地方体验这种不稳定的动画。以下是一些可能会减慢您网站速度的因素。

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

到

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

出于安全原因，完整性/交叉原则很重要。另一件事是你的page.js和styles.css文件都很大，你应该minify them。

您可以采取许多措施来优化您的网站。以下是一些可以帮助您的网站：

Google Developers Page Speed Test
GTmetrix Website Speed and Performance Optimization

Answer 2

示例代码完美无缺 - 但项目没有。已部署的版本现已使用我的修复程序进行了更新。这个问题在项目中更深层次 - 我无意中创造了两个不能很好地协同工作的超时。我重构了代码，因此只使用了1次超时，它解决了问题。

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

2 个答案: