Have CSS3 spin start slow then end slow? - css

Question

This is not a question that can be solved by using ease-in.
If I have an element that I want to spin in CSS3 for a certain amount of time, but that starts off slow and ends slow, how can I do this?
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>
I can't seem to figure out how to do this. My animation runs for a total of 121 seconds, since it takes 2 seconds for one spin to complete, so 60.5 spins will take a total of 121 seconds (if my math is incorrect, please tell me). This works fine, except that I want the div to start spinning off slow, then completed all 59 rotations, then end slow for the last one.
I'd like to use pure CSS for this, if possible.

Answer 1

Sorry that I don't have a JSFiddle...
Edit: I used a relative solution in my experiment: CSS3 Clock, could that count as a half fiddle? :D
Edit #2: JSFiddle provided by #Charlie: http://jsfiddle.net/7DPnc
If it really has to be pure CSS, I would suggest wrapping 3 divs together and spin them separately:
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>
Or if you don't mind using a little JS, listen to animationend event...

Answer 2

You need 60 spins in 120 seconds right?
Lets first change the iteration count to 1.
-webkit-animation-iteration-count:1;
and the duration to 120 seconds
-webkit-animation-duration: 120s;
Now set the amount of spins. (360deg x 60spins)
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(21600deg); }
}
And now we'll modify that to set the timing. (shave a rotation off each side, add to new section)
#-webkit-keyframes spin {
10% { -webkit-transform: rotate(360deg); }
90% { -webkit-transform: rotate(20880deg); }
100% { -webkit-transform: rotate(21600deg); }
}
Lastly, we set the easing function to linear in order to avoid the stop that will occur between keyframe sections if you use a curve. (replace with ease, ease-out, etc to see what I mean)
-webkit-animation-timing-function: linear;
You can easily tweak the timing by changing duration, and the keyframe percentages.
DEMO