10

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 ?

2
  • what exactly is easing in and out? the rotations?
    – blurfus
    Sep 21, 2016 at 0:28
  • 1
    edit : I thought you were asking what easing meant. Yes the rotations.
    – QiMath
    Sep 21, 2016 at 0:37

3 Answers 3

17

Instead of repeating the animation infinite times, you can specify a number of repetitions like this:

animation: spin 3s 3 ease-in-out; /* 3secs, repeat 3 times */

See animation iteration count for more examples.

Also useful to see the animation short-hand docs to set all the properties at once (like your code does)

I am not sure what the desired outcome you are looking for but I modified the animation to display the spinning happening three times (with some reversal spin as well)

#spin-please {
  background: green;
  width: 50px;
  height: 50px;
  /* @keyframes duration | timing-function | delay | 
      iteration-count | direction | fill-mode | play-state | name 
    */
  animation: 1s 3 spin;
  animation-timing-function: ease-in, linear, ease-out;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div id="spin-please">
</div>

4
  • Thanks for your answer, I actually already tried doing it this way, but css doesn't allow me to set the easing only at begging at the first rotation and the end of the thrid rotation. Doing it this way puts an easing between every rotation. What I'm trying to do is easing-in -> 2-3 rotations -> easing out
    – QiMath
    Sep 21, 2016 at 0:10
  • 1
    @eloism I am afraid this is the best I can do... not sure it's what you are seeking though.
    – blurfus
    Sep 21, 2016 at 1:08
  • Indeed ! your comment is actually the whole solution to my problem, thanks for your help ! :)
    – QiMath
    Sep 21, 2016 at 23:09
  • glad I could help :)
    – blurfus
    Sep 21, 2016 at 23:11
1

The problem is totally not because your animation isn't smooth, the problem with keyframes, according to this code

49% {
    transform: rotate(359deg);
  }
  50% {
    transform: rotate(0deg);
  }

Your animation have to do 360deg rotation in very short time which is 1% ( between 49% - 50%) for any animation-timing-function value your animation is not smooth, Try this code :

#spin-please {
	background: green;
	width: 50px;
	height: 50px;
	animation: spin 3s ease infinite;
}

@keyframes spin {
  0% {
    animation-timing-function: ease-out;
    transform: rotate(0deg);
}
50% {
    transform: rotate(180deg);
}
100% {
    animation-timing-function: ease-in;
    transform: rotate(360deg);
}
}
<div id="spin-please">
</div>
Remember you can change your animation-timing-function in your keyframes. more details about animation-timing-function.

2
  • Yes it looks indeed better that way. However the reason for my weird 49-50% is that I was trying to set a ns rotation in the ame animation. 50% is 360deg, and 100% would have been 720deg
    – QiMath
    Sep 21, 2016 at 11:24
  • @eloism try transform: rotate(720deg); , And for your question just add animation-timing-function in your keyframes.
    – MMJ
    Sep 21, 2016 at 21:55
0

#spin-it {
    background: green;
    width: 50px;
    height: 50px;
    animation: spin 1.5s ease infinite;
}

@keyframes spin {
  0% {
    animation-timing-function: ease-out;
    transform: rotate(0deg);
}
25% {transform: rotate(90deg);}
50% {
    transform: rotate(180deg);
}
75% {transform: rotate(270deg);}
100% {
    animation-timing-function: ease-in;
    transform: rotate(360deg);
}
}
<div id="spin-it">
</div>

My version of MMJ's It goes through 5 steps. Ease in >>> Turn 1 side >>> Turn 1 side >>> Turn 1 side >>> Turn 1 side >>> Ease out

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.