css3缓慢出现,让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

我似乎无法弄清楚如何做到这一点。我的动画总共运行了121秒，因为完成一次旋转需要2秒，因此60.5次旋转总共需要121秒(如果我的数学不正确，请告诉我)。这工作正常，除了我希望div开始慢速旋转，然后完成所有59次旋转，然后结束最后一个缓慢。

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

2012-08-15

Charlie

+0

如果你不介意加入_a little_ JavaScript中，你可以写3个动画，听'animationend'事件改变关键帧名字... –

2012-08-15 03:12:56

+0

反正有这样做没有JS？ ：D –

2012-08-15 03:16:35

+0

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

2012-08-15 03:49:03