html - CSS3 动画中元素的旋转不平滑且不连续

Question

我想使用 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; 
    }

Answer 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