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

Question

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

它第一次运行良好运行 - 但如果你运行使用添加旋转的 onclick 多次动画 class 随着时间的推移它会变得越来越断断续续. 这是一些在 jsfiddle 中带有 link 的代码：

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

出于安全原因，integrity/crossorigin 内容很重要。另一件事是您的 page.js 和 styles.css 文件都很大，您可能应该 minify them.

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

Google Developers Page Speed Test
GTmetrix Website Speed and Performance Optimization

Answer 2

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

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

CSS spinning circle animation onClick gets choppy when run multiple times

html

css

animation

css-transforms

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

CSS spinning circle animation onClick gets choppy when run multiple times

html

css

animation

css-transforms

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