Search code examples
animationcss

Repeating a nested CSS animation

I'm trying to get this loading bar: https://web.archive.org/web/20120608081511/http://www.webfroze.com/css/loading-animation-circle-style/

to repeat indefinitely.

I tried

-moz-animation:loading 1s infinite;
-webkit-animation:loading 1s infinite;

But this wont work since the animation is build up on 5 separate animated spheres which animate subsequent to one another, so setting them to repeat the infinite option messes it up

Solution

  • You need to add a rest in your animation, a part where nothing happens, so you can imitate delay.

    css: 

    #layer1 { -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; }
#layer2 { -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
#layer3 { -moz-animation-delay:0.9s; -webkit-animation-delay:0.9s; }
#layer4 { -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }
#layer5 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }

@-moz-keyframes loading {
    0%{-moz-transform:scale(0,0);}
    25%{-moz-transform:scale(1,1);}  
    50%{-moz-transform:scale(1,1);} 
    75%{-moz-transform:scale(0,0);} 
    100%{-moz-transform:scale(0,0);} 
}

@-webkit-keyframes loading {
    0%{-webkit-transform:scale(0,0);}
    25%{-webkit-transform:scale(1,1);}  
    50%{-webkit-transform:scale(1,1);} 
    75%{-webkit-transform:scale(0,0);} 
    100%{-webkit-transform:scale(0,0);}    
}

    Demo:
    http://jsfiddle.net/Vf2aq/2/