Convertir animation SVG SMIL animation CSS3

Question

Mon SVG en cours est animé en utilisant l'animation SMIL

<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> 

animation SVG SMIL est pas pris en charge dans IE. Je voudrais donc remplacer la partie animation par une animation CSS, ce qui rend l'animation plus largement supportée. Comment remplacer l'animation SVG SVIL ci-dessus par une animation CSS?

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"> 
 
\t <g transform="translate(32,32)" stroke-width="0"> 
 
\t \t <circle r="5" cx= "24" cy= "0" /> 
 
\t \t <circle r="5" cx= "17" cy= "17" /> 
 
\t \t <circle r="5" cx= "0" cy= "24" /> 
 
\t \t <circle r="5" cx="-17" cy= "17" /> 
 
\t \t <circle r="5" cx="-24" cy= "0" /> 
 
\t \t <circle r="5" cx="-17" cy="-17" /> 
 
\t \t <circle r="5" cx= "0" cy="-24" /> 
 
\t \t <circle r="5" cx= "17" cy="-17" /> 
 
\t </g> 
 
</svg>