CSS animation with time interval

Question

I want to rotate a graphic element infinitely but with some time interval by step.

For example, rotate 90 degree (smooth animation) then after 5 secs rotate another 90 degree and repeat the same infinitely.

Can this be done using only css?

Here is my JS BIN

Itay · Accepted Answer · 2021-07-28 09:33:57Z

21

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

@-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;
}

Snippet

@-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 {
  position: relative;
}
.wrapper a:first-child div{
  position: absolute;
  width:25px;
  height:25px;
  top: 13px;
  left: 13px; 
  background: red;
  z-index: 100;
}
.wrapper a:last-child div {
  width:50px;
  height:50px;
  position: relative;
  background: orange;
  -webkit-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <a href="#"><div></div></a>
    <a href="#"><div></div></a>
  </div>
</body>
</html>

edited Jul 28, 2021 at 9:33

answered Sep 15, 2013 at 12:06

Itay

16.8k2 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Seong Lee Over a year ago

Although it works fine in my JS BIN sample, when applied to my actual work it shows some weird behavior. There is no animated movement in the 2nd and 4th rotation. Any idea?

Seong Lee Over a year ago

This is with the actual images I am using. Please take a look at this JS BIN

Itay Over a year ago

let us continue this discussion in chat

grub · Accepted Answer · 2013-09-15 12:01:08Z

3

You could try something like this.

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

Though, it doesn't allow for exact timing, it could do roughly what you requested.

answered Sep 15, 2013 at 12:01

grub

411 silver badge3 bronze badges

Comments

Jakub Kotrs · Accepted Answer · 2013-09-15 12:13:36Z

1

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);}
}

edited Sep 15, 2013 at 12:13

answered Sep 15, 2013 at 12:04

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

Collectives™ on Stack Overflow

CSS animation with time interval

3 Answers 3

Snippet

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Snippet

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related