Rotate 7 times then Ease - css

Question

Hello I am trying to animate an element so that it spins 7 times then slows down and eases I have the spinning done I just need to ease it. I am using a from and to keyframe to spin it, would I need to do it frame by frame or is there another way?
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: linear;
}

Answer 1

You mean like this:
.spin {
width:100px;
height:100px;
background:red;
}
#-webkit-keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(2520deg);
}
}
.spin.animated {
-webkit-animation-name: spin;
-webkit-animation-duration: 2800ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
}
<div class="spin animated"></div>
Or even better:
.spin {
width:100px;
height:100px;
background:red;
}
.spin:hover {
transform:rotate(2520deg);
transition: transform 3s ease-out;
}
<div class="spin"></div>

Answer 2

In the to, give another animation:
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
animation: ease;
}
}
#keyframes ease {
}
You might need to tackle the iteration count here. It should happen only after the 7 animations. So, I am not sure about that.

Answer 3

You have it pretty much all the way there.
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: ease; /* your timing function is where you tell it how to animate */
}
here is list of all available calls:
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Answer 4

You can do it with a cubic bezier timing function.
Something like
cubic-bezier(0.81, 0.95, 0.84, 0.95)
will give an effect like the one that you are searching. There is a linear animation most of the time, and then it slows down
You can try different values, and set it graphically, here
bezier curve tester