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 Dynamically Fit image in screen using css

    How to get background image/ image to stretch to fill container via CSS?

    How to get an image to resize on scroll?

    How to Vertically Center 2 anchor tags with CSS?

    JSoup - how to grab a href (url/link) immediately preceding a ?

    How to dynamically generate CSS3 keyframe steps using SASS?

    How to display a box of color beside a table row using CSS?

    How do I add another css to Bootstrap?

    How do I correctly fromat this div's contents?

    WebPack how to put all css files into one css file

    Use anchors and :target for navigation. How to show first layer by default

    How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)

    How to make pagination's circle of slider using CSS only?

    How to adjust an image size with a progressive scaling on viewport resize

    How to make this div using html and css?

    How to style checkbox using CSS?

    How do I make this carousel implementation better?

    nth-of-type css, how to setup it properly

    How to style PushButton's image size on hover/pressed in Qt4 using CSS

    How to simulate \hfill with HTML and CSS?

    How to tooltip keep active using HTML and CSS or Jquery?

    Responsive portrait images, Hows & Dont's?

    How to make header in css but im using opacity?

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How to add a CSS style sheet reference to all Web forms in a Visual C# .NET Web project

    CSS question - transparent underlined textbox - howto?

    How to create page breaks automatically in CSS?

    How to make an element remain inline

    how to position an element on top of another element?

    How to prevent css keyframe animation on page load?