Time-lapse CSS Animation

Question

I want to rotate the graphic element endlessly, but with a certain time interval.

For example, rotate 90 degrees (smooth animation), then after 5 seconds rotate another 90 degrees and repeat the same thing endlessly.

Is it possible to do this using only css?

Here is my JS BIN

Answer 1

Pretty simple. The following code limits the conversion of key frames to 40%-60% (one fifth of the entire duration). So, if we give 6 seconds whole animation, 1.2s will be used for moving, and 4.8s will be used for delay. You can play with it to get more accurate numbers.

Demo

 @-webkit-keyframes rotation { 0%, 40% {-webkit-transform: rotate(0deg);} 60%, 100% {-webkit-transform: rotate(90deg);} } @keyframes rotation { 0%, 40% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } } .wrapper a:last-child div { -webkit-animation: rotation 6s infinite linear; animation: rotation 6s infinite linear; } 

Answer 2

You can try something like this.

 @-webkit-keyframes rotation { 0%,10% {-webkit-transform: rotate(0deg);} 90%,100% {-webkit-transform: rotate(90deg);} } 

Although this does not allow for accurate synchronization, it can do roughly what you requested.

Answer 3

For regular rotation you can use

 @-webkit-keyframes rotation { 0% {-webkit-transform: rotate(0deg);} 12.5%, 25% {-webkit-transform: rotate(90deg);} 37.5%, 50% {-webkit-transform: rotate(180deg);} 62.5%, 75% {-webkit-transform: rotate(270deg);} 87.5%, 100% {-webkit-transform: rotate(360deg);} }