How to add a delay between cycles of css animation [duplicate]


Tags: html,css,html5,css3

Problem :

This question already has an answer here:

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>


Solution :

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


    CSS Howto..

    How to apply advanced styling for all portlets of one kind

    How to get the initial value of style properties in javascript? [duplicate]

    How can I add block colour to the CSS of my list?

    How can I prevent my li's from going below my menu even if there is no room?

    How to have different alignments in one div(nav)?

    How I can get an Image height and divide it by 2 using Jquery

    How to find class =“class1” included class=“class2” in CSS? [closed]

    How to give border a single border for two adjacent cells in css

    how to not inherit? or how to reset inherited width to the value before? (css)

    How to modify multiple elements of a block with BEM CSS

    How to Assemble HTML,CSS and JS with EachOther

    How to use “Monotype Corsiva” font in CSS statement?

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    How to edit 'clip' CSS property in JQuery?

    How can I get a CSS table DIV to be constrained inside another DIV?

    how to include absolute css path using add_editor_style() in wordpress

    when hovering on iframe, how do I trigger a class on element outside of iframe?

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    How to place an element in top of another using CSS (without using absolute position)?

    How to create a Dribbble-esque image hover effect?

    How to add javascript expression's output to my CSS?

    How can I get jQuery to toggle a class with fadeToggle?

    How to make hyperlink for a background image?

    how to read the following css class

    How can I align a button at the bottom of a div?

    How To Refer To CSS Background Image in Visual Studio?

    How to zoom content to screen width

    How do align texts in the child div

    How to replicate this CSS sibling selector in jQuery?

    How to trigger css3 rotate effect by clicking?