将SVG SMIL动画转换为CSS3动画

Question

我的当前SVG使用smil Animation

为动画

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

IE中不支持

SVG SMIL动画。因此，我想用CSS动画替换动画部分，从而使动画得到更广泛的支持。

如何用CSS动画替换上述SVG SMIL动画？

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>