让CSS3 spin开始变慢然后结束变慢？

Question

这不是一个可以使用ease-in解决的问题。

如果我有一个元素，我想在CSS3中旋转一段时间，但开始很慢，结束也很慢，我该怎么做？

CSS

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

div{
  background-image:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(51,51,51,1) 20%,rgba(0,0,0,1) 20%,rgba(51,51,51,1) 40%,rgba(0,0,0,1) 40%,rgba(51,51,51,1) 60%,rgba(0,0,0,1) 60%,rgba(51,51,51,1) 80%,rgba(0,0,0,1) 80%,rgba(51,51,51,1) 100%);
  width: 200px;
  height: 200px;
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 60.5;
  -webkit-animation-timing-function: ease-in;
}

HTML

<div></div>

我似乎想不出该怎么做。我的动画总共运行了121秒，因为它需要2秒才能完成一次旋转，所以60.5次旋转总共需要121秒(如果我的计算不正确，请告诉我)。这很好用，除了我希望div开始缓慢旋转，然后完成所有59次旋转，最后一次缓慢结束。

如果可能的话，我想使用纯CSS。

Answer 1

很抱歉我没有JSFiddle...

编辑：我在我的实验中使用了一个相对的解决方案：CSS3 Clock，这能算半个小提琴吗？:D

编辑#2：JSFiddle由@Charlie：http://jsfiddle.net/7DPnc提供

如果它真的必须是纯CSS，我会建议将3个div包装在一起，并分别旋转它们：

CSS

div.first_round
{
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
}
div.last_round
{
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1.5;
-webkit-animation-delay:100s; /* you'll have to do the math */
}
div.main_round
{
-webkit-animation-duration:2s;
-webkit-animation-delay:3s;
-webkit-animation-iteration-count:59;
-webkit-animation-timing-function:linear;
}

HTML

<div class="first_round">
<div class="last_round">
<div class="main_round">
</div>
</div>
</div>

或者，如果您不介意使用一些JS，请收听animationend事件...

Answer 2

你需要在120秒内旋转60圈，对吗？

让我们首先将迭代次数更改为1。

-webkit-animation-iteration-count:1;

将持续时间设置为120秒

-webkit-animation-duration: 120s;

现在设置旋转的数量。(360度x 60自旋)

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(21600deg); }
}

现在我们将对其进行修改以设置计时。(刮掉每边的旋转，添加到新的部分)

@-webkit-keyframes spin {
  10% { -webkit-transform: rotate(360deg); }
  90% { -webkit-transform: rotate(20880deg); }
  100% { -webkit-transform: rotate(21600deg); }
}

最后，我们将缓动函数设置为线性，以避免在使用曲线时在关键帧部分之间发生的停止。(替换为ease、ease-out等，明白我的意思)

-webkit-animation-timing-function: linear;

您可以通过更改持续时间和关键帧百分比轻松调整计时。

DEMO