How to add a delay between cycles of css animation

Question

I am rotating a circular <div> infinity in 360 degrees using css animation. After each rotation, I want a halt or delay of 5 seconds before next rotation. How can I achieve it?

Here's a live example

Code is as following.

CSS

.circle{
    position: absolute;
    top: 4;
    right: 4;
    height: 21px;
    width: 21px;
    border-radius: 50%;
    background: #00B5F9;
    color: white;
    font-family: varela round;
    font-size: 11;
    font-weight: 500;
    border: 1px solid white;
    -webkit-animation-name: lol;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function:  ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s
}
@-webkit-keyframes lol {  
    0% { -webkit-transform:rotate(0deg) }

    100% { -webkit-transform:rotate(360deg) }

}

HTML

<div class="circle">56</div>

This QA is much cleaner than the one referenced to. – themefield Nov 24 '17 at 04:36 — themefield, Nov 24 '17 at 04:36

score 8 · Accepted Answer · answered Oct 07 '14 at 10:09

8

You can do something like this.

0% { -webkit-transform:rotate(0deg) }
20% { -webkit-transform:rotate(360deg) }
100% { -webkit-transform:rotate(360deg) }

and change the duration of the rotation

-webkit-animation-duration: 6s;

So what you are doing is setting the animation to take 6's but moving the rotation to be quicker (20% is not correct for 5's wait but you can work it out). So the rotate happens and then it sits at 360deg for the remainder of the time.

Demo Here

answered Oct 07 '14 at 10:09

Ruddy

9,795
5
45
66

2

whoa, That's just brilliant. +1 – Aditya Ponkshe Oct 07 '14 at 10:11
Just out of curiosity is there any particular css property for this? like `-webkit-animation-delay` ? – Aditya Ponkshe Oct 07 '14 at 10:14
@AdityaPonkshe From what I know of there isn't. I also wanted a property for this but there isn't one yet. – Ruddy Oct 07 '14 at 10:16
`transistion-delay: 2s;` ? – Benjamin Oct 07 '14 at 10:24
1

@Benjamin That delays the animation the first time, that is all. So just when the animation will start. – Ruddy Oct 07 '14 at 10:42

How to add a delay between cycles of css animation

1 Answers1

Linked