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 render email template in a page?

    How to arrange this php if-statement which outputs ratings (good, great, exxelent, etc.)?

    Custom Javascript and css added to Wordpress, however, still not working

    How to “float” an absolutely positioned element div out of its container

    How to serve different css files to different ajax pages?

    How do I allow CSS files to be referenced from other domains?

    How to check if a particular CSS value exists

    How do I center this menu?

    How do I prevent my menu div element to not overlay the footer div element?

    How to hide navbar when when overlay appears

    How do I disable warnings from Aspx files (HTML,CSS)

    How to fix angular-strap css

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    How to select inner div in an unordered list

    How can I add specific css id to parent menu with php or javascript

    how to select the first element of each class with css

    How can i display images horizontally using PHP and mysql?

    How do I display image flush with other images after a clear?

    How to make html lists horizontal in css?

    How to get the effect not to add one more div?

    How to stop jitter of relatively placed items on scrolling with mouse?

    css nested classes, how to not repeat code?

    Why does my progress bar shows full progress value before it start loading

    How to Prevent My CSS From Clashing With Facebook's CSS?

    How to make a CSS bar go from right to left?

    How to add a color overlay to a background image?

    how to add background images using css in phonegap

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to make CSS for search results

    How to apply common JavaScript and CSS for all my jsp pages in the application?