2

这不是一个可以通过使用来解决的问题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。

4

2 回答 2

2

抱歉，我没有 JSFiddle ......

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

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

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

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事件...

于 2012-08-15T04:12:50.567 回答
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); }
}

最后，我们将缓动函数设置为线性，以避免在使用曲线时在关键帧部分之间发生停止。（轻松替换，缓出等，看看我的意思）

-webkit-animation-timing-function: linear;

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

演示

于 2013-09-27T17:41:20.743 回答