Jquery css3动画-轻松

我有一个图像，它使用以下代码在其轴上旋转：

@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;
}

这很好，但问题是我希望动画开始缓慢，加速，然后需要一些时间来减慢。 如果我使用动画计时功能：ease in out我得到了想要的效果，但只是在每次迭代中。我想将计时功能应用于整个动画（所有迭代）

---

有人知道我可以这样做吗？

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

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

---

试试这样。。。请注意，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;
}

---

它现在旋转了2次，速度变慢了80%。

你可以改变你的动画，以3.6度的间隔提供100个关键帧，然后将迭代次数设置为1给我们你的小提琴链接，我们可以用多个关键帧来更新你。这很好，但当我希望它实际旋转超过360度时会发生什么？我需要它循环几次，但在接近尾声时会变慢。同样的问题如上所述，这对于一个完整的循环来说是非常好的。我需要它完全旋转至少几次，并在后面的迭代中减速。完美，没有意识到你可以超过360度

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