How can I repeat a spinning animation x times before easing it out ?
For instance :
#spin-please {
background: green;
width: 50px;
height: 50px;
animation: spin 3s infinite ease-in-out;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
49% {
transform: rotate(359deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="spin-please">
</div>
My animation right now is not very smooth at all (as you can see between the 1st and 2nd rotation), and there is an easing between the 2 rotations, which I want only at the start of the first of the rotation and at the end of the second (or the third if I choose to go with an additional rotation).
Easing in ==> rotation 1 ==> rotation 2 ==> easing out
Is this doable with CSS ?