My SVG animated using SMIL animation.

SVG SMIL animation is not supported in IE .
Therefore, I would like to replace the animation part with a CSS-анимацию to make the animation more widely supported.

 <svg viewBox="0 0 64 64"> <g> <circle r="5" cx="24" cy="0" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values="1;.9;.85;.7;.4;.3;.3;.3;1" repeatCount="indefinite"></animate> </circle> <circle r="5" cx="16.970562748477143" cy="16.97056274847714" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values=".3;1;.9;.85;.7;.4;.3;.3;.3" repeatCount="indefinite"></animate> </circle> <circle r="5" cx="1.4695761589768238e-15" cy="24" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values=".3;.3;1;.9;.85;.7;.4;.3;.3" repeatCount="indefinite"></animate> </circle> <circle r="5" cx="-16.97056274847714" cy="16.970562748477143" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values=".3;.3;.3;1;.9;.85;.7;.4;.3" repeatCount="indefinite"></animate> </circle> <circle r="5" cx="-24" cy="2.9391523179536475e-15" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values=".4;.3;.3;.3;1;.9;.85;.7;.4" repeatCount="indefinite"></animate> </circle> <circle r="5" cx="-16.970562748477143" cy="-16.97056274847714" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values=".7;.4;.3;.3;.3;1;.9;.85;.7" repeatCount="indefinite"></animate> </circle> <circle r="5" cx="-4.408728476930472e-15" cy="-24" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values=".85;.7;.4;.3;.3;.3;1;.9;.85" repeatCount="indefinite"></animate> </circle> <circle r="5" cx="16.970562748477136" cy="-16.970562748477143" transform="translate(32,32)" stroke-width="0"> <animate attributeName="fill-opacity" dur="750ms" values=".9;.85;.7;.4;.3;.3;.3;1;.9" repeatCount="indefinite"></animate> </circle> </g>

How to replace the above SVG SMIL animation with CSS animation?

1 answer 1

 circle { animation: fade 800ms infinite; } circle:nth-child(1) { animation-delay: -700ms; } circle:nth-child(2) { animation-delay: -600ms; } circle:nth-child(3) { animation-delay: -500ms; } circle:nth-child(4) { animation-delay: -400ms; } circle:nth-child(5) { animation-delay: -300ms; } circle:nth-child(6) { animation-delay: -200ms; } circle:nth-child(7) { animation-delay: -100ms; } @keyframes fade { 0% { fill-opacity: 1; } 12% { fill-opacity: .9; } 25% { fill-opacity: .85; } 37% { fill-opacity: .7; } 50% { fill-opacity: .4; } 62%, 87% { fill-opacity: .3; } 100% { fill-opacity: 1; } } 
 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 64 64"> <g transform="translate(32,32)" stroke-width="0"> <circle r="5" cx= "24" cy= "0" /> <circle r="5" cx= "17" cy= "17" /> <circle r="5" cx= "0" cy= "24" /> <circle r="5" cx="-17" cy= "17" /> <circle r="5" cx="-24" cy= "0" /> <circle r="5" cx="-17" cy="-17" /> <circle r="5" cx= "0" cy="-24" /> <circle r="5" cx= "17" cy="-17" /> </g> </svg>

  • one
    Class, just thought how to implement this on SVG) - LFC
  • I somehow just had a GIF on this site, the result was the same. Although sure the option with SVG will be better. - LFC
  • one
    @LFC gif is someone like where did it. And here will be his, - you want to change the number of circles, their color, animation speed - Alexandr_TT
  • one
    So am I, that this option is better. I found a gifka somewhere in the network, the quality was tolerable, the site burned had to be done. Then I was still thinking about SVG, but my hands didn’t make it at that time. And then I open the question and here it is. Thank! - LFC