Animație cu pauză între fiecare rotație

[Marius]

Am un Div pe care vreau să-l rotesc de la 0 la 90 grade, pauză 2s, apoi de la 90 la 180, iar pauză 2s .., tot asa până la 360 de grade.
Vreo idee despre cum pot adăuga o pauză de 2 secunde între fiecare rotație?

Puteți face cu animații CSS transform: rotate(), ca în exemplu de mai jos.
Setezi timpul de rotatie la 12 secunde si incepi cele 4 rotatii 'transform' cu 5% mai mult decat precedenta (acea diferenta va fi pauza).
Prima definire e la 0%, urmatoarea e de la 5% la 25%, apoi urmatoarea incepe de la 30%, si tot asa.

Cod: Selectaţi tot

<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..