Question

I have a CSS3 Circle Loader that has 3 circles. I am having problems Each circle (starting from the first) should fade out after a few seconds possibly using CSS Animations. Any help is appreciated.

jsFiddle

Answer 1

I’d go a slightly different route.
Only made for webkit but you can alter as needed: http://jsfiddle.net/8kQ2u/17/

@-webkit-keyframes fades {
    0%, 100% { 
       opacity: 1;
    }
    50% {
       opacity: 0;
    }
}

.circle span  {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 9.975em auto;
  background: #dbdbdb;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-name: fades;
  -webkit-animation-iteration-count: infinite;
}

.circle span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
}

.circle span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
}
​

:nth-child here is fine since I’m pretty sure it has full support in browsers that support @keyframes. You could use the sibling selector if you prefered (+).