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

这不是一个可以通过使用ease-in解决的问题。让CSS3旋转开始缓慢然后结束缓慢？

如果我有一个元素，我想在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，如果可能的话。

来源

2012-08-15 Charlie

如果你不介意加入_a little_ JavaScript中，你可以写3个动画，听'animationend'事件改变关键帧名字... – Passerby 2012-08-15 03:12:56

反正有这样做没有JS？：D – Charlie 2012-08-15 03:16:35

如果它真的必须是纯粹的CSS ......将3个'div'包装在一起并使用3个动画，其中一个用于大多数'div'旋转第一轮，一个延迟几秒并旋转“in most “div”进行59轮，一次延迟~100秒，并在最后一轮旋转中间“div”。你当然需要做数学运算:) – Passerby 2012-08-15 03:49:03

对不起，我没有的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事件...

来源

2012-08-15 04:12:50 Passerby

http://jsfiddle.net/7DPnc/这难道不是更流畅吗？ – Charlie 2012-08-15 04:29:27

@Charlie OK你明白了:) – Passerby 2012-08-15 04:40:11

你需要60秒在120秒内旋转吧？

让我们首先更改迭代计数为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

来源

2013-09-27 17:41:20

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

回答

相关问题