css - CSS3 旋转是否开始缓慢然后结束缓慢？

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 ，这能算半个 fiddle 吗？ :D

编辑 #2:@Charlie 提供的 JSFiddle: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 事件...