Question

我有这个图像使用以下代码在它的轴上旋转：

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

.spinner {
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: 100;
    animation-timing-function: ease-in-out;
}

这很好用，但问题是我希望动画启动慢，加速然后慢慢减速。如果我使用动画计时功能：轻松进出; 我获得了所需的效果，但仅限于每次迭代。我想将计时功能应用于整个动画（所有迭代）。

有谁知道我可以做到这一点的方式？

Answer 1

您可以逐步增加关键帧，如下所示：

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    40% { -webkit-transform: rotate(300deg); }
    60%,100% { -webkit-transform: rotate(360deg); }
}

http://jsfiddle.net/BW6SX/2/

Answer 2

尝试类似这样的事情......注意10％的增量是均匀的，但是旋转度增加了你想要的效果......

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    10% { -webkit-transform: rotate(45deg); }
    20% { -webkit-transform: rotate(45deg); }
    30% { -webkit-transform: rotate(45deg); } 
    40% { -webkit-transform: rotate(90deg); }
    50% { -webkit-transform: rotate(90deg); }
    60% { -webkit-transform: rotate(180deg); }
    70% { -webkit-transform: rotate(180deg); }
    80% { -webkit-transform: rotate(360deg); }
    90% { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(360deg); }   
    }

.spinner {
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: 100;
    animation-timing-function: ease-in-out;
}

Answer 3

@-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        40% { -webkit-transform: rotate(360deg); }
        80% { -webkit-transform: rotate(700deg); }
      100% { -webkit-transform: rotate(720deg); }
 }

现在旋转2次，在80％时变慢。

CSS 3动画 - 缓解

3 个答案: