Essai SVG / CSS

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <rect id="animation" width="100" height="100" fill="goldenrod" opacity="1">
      <animateTransform attributeName="transform" attributetype="xml" type="rotate" from="0 50 50" to="90 50 50" begin="animation.mousedown" dur="5s" fill="freeze" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" attributetype="xml" type="rotate" from="90 50 50" to="0 50 50" begin="excuse.mousedown" dur="5s" fill="freeze"/>
      <animate attributeName="opacity" from="1" to="0" begin="animation.mousedown" dur="5s" fill="freeze"/>
      <animate attributeName="height" from="100" to="0" begin="animation.mousedown" dur="5s" fill="freeze"/>
      <animate attributeName="width" from="100" to="0" begin="animation.mousedown" dur="5s" fill="freeze"/>
      <animateMotion from="0,0" to="50,50" begin="animation.mousedown" dur="5s" fill="freeze"></animateMotion>
      <animate attributeName="opacity" from="0" to="1" begin="excuse.mousedown" dur="5s" fill="freeze"/>
      <animate attributeName="height" from="0" to="100" begin="excuse.mousedown" dur="5s" fill="freeze"/>
      <animate attributeName="width" from="0" to="100" begin="excuse.mousedown" dur="5s" fill="freeze"/>
      <animateMotion from="50,50" to="0,0" begin="excuse.mousedown" dur="5s" fill="freeze"></animateMotion>
    </rect>
  </defs>
  <!-- use  multiple times -->
  <ellipse ry="4" rx="4" id="excuse" cy="150" cx="150" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" fill="goldenrod">
  <animate attributeName="opacity" values="0;0;0;0;0;1" begin="animation.mousedown" dur="6s" fill="freeze"/>
  <animate attributeName="rx" from="4" to="5" begin="animation.mousedown" dur="1s" repeatcount="indefinite"/>
  <animate attributeName="ry" from="4" to="5" begin="animation.mousedown" dur="1s" repeatcount="indefinite"/>
  <animate attributeName="opacity" from="1" to="0" begin="excuse.mousedown" dur="2s" fill="freeze"/>
  </ellipse>
  <use xlink:href="#animation" x="0" y="0" />
  <use xlink:href="#animation" x="100" y="0" />
  <use xlink:href="#animation" x="200" y="0" />
  <use xlink:href="#animation" x="0" y="100" />
  <use xlink:href="#animation" x="100" y="100" />
  <use xlink:href="#animation" x="200" y="100" />
  <use xlink:href="#animation" x="0" y="200" />
  <use xlink:href="#animation" x="100" y="200" />
  <use xlink:href="#animation" x="200" y="200" />


</svg>