CSS animation - animate one element after another

Question

I wanting to animate one element then another then another, is this possible with CSS? I can't seem to get it working, here is my attempt so far. I have two major problems:

1) My animation does not happen.

2) When it does happen, it will animate each element at the same time, what I wanting is animate the next element when the last has finished. Does CSS have this kind of capability yet?

3) I want it to be infinite.

I think I have name 3, but my animation wont play so I cannot test it. I am trying to make a loading animation, ideally I dont want to use JS as I assume this would be bad practice?

Answer 1

You need to add different animation-delay to all elements.

Demo using animation-direction: alternate ---> jsbin

@keyframes load {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.e {
  width: 100%;
  height: 30px;
  opacity: 0;
}
.one {
  background: red;
  -webkit-animation: load 5s infinite;
  animation: load 5s infinite;
}
.two {
  background: green;
  -webkit-animation: load 5s infinite 1s;
  animation: load 5s infinite 1s;
}
.three {
  background: yellow;
  -webkit-animation: load 5s infinite 2s;
  animation: load 5s infinite 2s;
}
.four {
  background: pink;
  -webkit-animation: load 5s infinite 3s;
  animation: load 5s infinite 3s;
}
.five {
  background: purple;
  -webkit-animation: load 5s infinite 4s;
  animation: load 5s infinite 4s;
}

<div class="e one"></div>
<div class="e two"></div>
<div class="e three"></div>
<div class="e four"></div>
<div class="e five"></div>