CSS3动画中元素的旋转不平滑和连续答案

【问题标题】：Rotation of elements not being smooth and continous in CSS3 animationCSS3动画中元素的旋转不平滑和连续
【发布时间】：2014-02-11 17:35:40
【问题描述】：

我想使用 CSS3 制作一个 ajax 加载动画。我要做的就是以恒定的速度连续旋转这些圆圈。这是我到目前为止所做的，但问题是动画不知何故不流畅；动画开始慢，中间快，结束慢。

我在某处读到 animation-timing-function:linear; 会这样做；我做到了，但现在仍在工作。仍然是一种缓和动画。

谁能告诉我如何才能做到这一点。

标记：

<div class="ajax">
    <div class="round outer"></div>
    <div class="round inner"></div>
</div>

CSS：

.ajax {position: relative; }
        .round {border: 5px solid #555; position: absolute; height: 40px; width: 40px; border-radius: 50%; }
        .round.inner {margin: 12px; }
        .round.outer {padding: 12px; }
        .round.outer:before {content: ''; position: absolute; height: 7px; width: 5px; background: #fff; top: -5px; left: 29px;}
        .round.inner:after {content: ''; position: absolute; border: 5px solid transparent; border-bottom: 7px solid #555; left: 15px; top: -15px; }
        .round.inner:before {content: ''; position: absolute; width: 5px; height: 7px; background: #fff; bottom: -7px; left: 18px;}

        @keyframes ajax-rotate
        {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }

        @-webkit-keyframes ajax-rotate 
        {
            from {-webkit-transform: rotate(0deg);}
            to {-webkit-transform: rotate(360deg);}
        }

        @keyframes ajax-rotate-c
        {
            from {transform: rotate(0deg);}
            to {transform: rotate(-360deg);}
        }

        @-webkit-keyframes ajax-rotate-c
        {
            from {-webkit-transform: rotate(0deg);}
            to {-webkit-transform: rotate(-360deg);}
        }

    .ajax .round {
        -webkit-animation-timing-function:linear;
        animation-timing-function:linear; 
        }
    .ajax .round.inner{
        animation: ajax-rotate 2s infinite;
        -webkit-animation: ajax-rotate 2s infinite; 
    }

    .ajax .round.outer{
        animation: ajax-rotate-c 2s infinite;
        -webkit-animation: ajax-rotate-c 2s infinite; 
    }

【问题讨论】：

标签： html css animation css-animations

【解决方案1】：

你需要将缓动函数指定为线性

.ajax .round.inner{
    animation: ajax-rotate 2s infinite linear;
    -webkit-animation: ajax-rotate 2s infinite linear; 
}

.ajax .round.outer{
    animation: ajax-rotate-c 2s infinite linear;
    -webkit-animation: ajax-rotate-c 2s infinite linear; 
}

这里是fiddle

【讨论】：

谢谢。现在我知道它们以前被覆盖了。