0

My current SVG is animated using 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>

SVG SMIL animation is not supported in IE. So I would like to replace the animation part by CSS animation, making the animation more widely supported.

How can I replace the above SVG SMIL animation by a CSS animation?

1

1 Answer 1

2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.