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