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? 😀

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…