Pause animation between each rotation

[Marius]

I have a Div that I want to rotate from 0 to 90 stop 2s, then continue from 90 to 180 then stop 2s .., to the 360 degrees.
Any idea of how can I add a pause of 2 seconds between each rotation?

You can do that with CSS animations transform: rotate(), like in the example below.
Set the rotation time to 12 seconds and start the 4 'transform' rotations with a difference of +5% than the previous one (that difference will be the pause).
The first definition is at 0%, the next is from 5% to 25%, then the next one starts at 30%, and so on.

Code: Select all

<style>
#div_id {
  width: 90px;
  height: 50px;
  background:  #abcdef;
  animation: rotate-pause 12s infinite linear;
  transform: rotate();
}

@keyframes rotate-pause{
  0%{
    transform: rotate(0deg);
  }
  5%, 25%{
    transform: rotate(90deg);
  }
  30%, 50%{
    transform: rotate(180deg);
  }
  55%, 75%{
    transform: rotate(270deg);
  }
  80%, 100%{
    transform: rotate(360deg);
  }
}
</style>

<div id='div_id'>Div content..</div>

- Demo:

Div content..