変換SVG SMILアニメーションは

Question

は私の現在のSVGは、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> 

SVG SMILアニメーションを使ってアニメーション化されてIEでサポートされていません。そこで、アニメーション部分をCSSアニメーションに置き換え、アニメーションをより広くサポートしたいと考えています。

上記のSVG SMILアニメーションを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>