CSS Infinite Loop issue

Question

I am happy with the current animation but Im having trouble getting the animation to start over from the beginning and looping infinitely. Can use some help on this one.I have also included the svg as well.I believe that the issue may be related to the forwards keyword as the animation runs sequentially from bar 1 to bar 7. Thanks again for the help as this has been a bit of a concern for a while now.

body {
  background: #000;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

svg g path {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 300ms forwards;
}

svg g path#bar1 {
  animation-delay: 500ms;
}

svg g path#bar2 {
  animation-delay: 1s;
}

svg g path#bar3 {
  animation-delay: 2s;
}

svg g path#bar4 {
  animation-delay: 3s;
}

svg g path#bar5 {
  animation-delay: 4s;
}

svg g path#bar6 {
  animation-delay: 5s;
}

svg g path#bar7 {
  animation-delay: 6s;
}

user_14279827 · Answer

Check this out

@keyframes fadeIn {
     0% {
         opacity: 0;
    }

  50%{
    opacity:1
  }
     100% {
         opacity:0;
    }
}
 body {
     background: #444;
}
 path[class^="bar"] {
     opacity: 0;
     animation: fadeIn 5s ease;
   animation-iteration-count: 10;
}

 path.bar1 {
     animation-delay: 500ms;
}
 path.bar2 {
     animation-delay: 1s;
}
 path.bar3 {
     animation-delay: 1.5s;
}
 path.bar4 {
     animation-delay: 2s;
}
 path.bar5 {
     animation-delay: 2.5s;
}
 path.bar6 {
     animation-delay: 3s;
}
 path.bar7 {
     animation-delay: 3.5s;
}

user_1533592 · Answer

The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping. Add the following to your svg g path CSS selector function animnation-iteration-count: infinite.

user_14279827 · Answer

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

svg g rect {
  opacity: 0;

  animation: fadeIn 1s ease-in-out 300ms infinite;

  &#bar1 {
    animation-delay: 500ms;
  }
  &#bar2 {
    animation-delay: 1s;
  }
  &#bar3 {
    animation-delay: 2s;
  }
  &#bar4 {
    animation-delay: 3s;
  }
  &#bar5 {
    animation-delay: 4s;
  }
  &#bar6 {
    animation-delay: 5s;
  }
  &#bar7 {
    animation-delay: 6s;
  }
}

CSS Infinite Loop issue

3 Answers