Как конвертировать SVG SMIL анимацию в CSS3 анимацию

09 сентября 2019, 04:40

Мой SVG анимирован с использованием SMIL - анимации.

SVG SMIL анимация не поддерживается в IE.
Поэтому я хотел бы заменить анимационную часть на CSS-анимацию, чтобы сделать анимацию более широко поддерживаемой.

<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 на 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"> 
	<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>