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

Answer 2

你需要在120秒内完成60次旋转吗？

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

-webkit-animation-iteration-count:1;

并且持续时间为120秒

-webkit-animation-duration: 120s;

现在设置旋转量。（360deg x 60spins）

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

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

DEMO

让CSS3旋转开始慢然后结束慢吗？

2 个答案: