0

I have created a CSS animation that I want to use as a page preloader. Right now the animation the working fine for a single iteration but I want to restart the animation from the start every 5 seconds after it completes. I want to play it like an infinite loop.

If I use iteration count infinite then each animation will start as soon as it completes, at that point the entire animation is still running. Is there any way to start the whole process like after every 5 or 6 seconds?

Please find the stackblitz editor URL - https://stackblitz.com/edit/web-platform-7tyxh5?file=styles.css

RAHUL KUNDU
  • 561
  • 2
  • 10
  • 26
  • You can set `animation-iteration-count : infinite;` it will repeat after each duration finishes. – Abdullah Qasemi Jun 21 '22 at 07:50
  • Its already answered checkout: https://stackoverflow.com/questions/6268508/restart-animation-in-css3-any-better-way-than-removing-the-element – Muhammad Haseeb Jun 21 '22 at 07:58
  • This Question have been answered here is the link for the answer https://stackoverflow.com/questions/16783554/how-to-make-css-animation-to-play-every-10-seconds – Kabeer Ahmad Jun 21 '22 at 08:00
  • you just set animation as `infinite` and add `animation-delay: 5s` – tony Jun 21 '22 at 10:54

0 Answers0