Анимация работы компьютерного вентилятора

<style>
  .cooler {
  }
  .cooler__blades {
    transform-origin: 50% 50%;
  }
  .cooler--state_on .cooler__blades {
    animation-name: spin;
    animation-duration: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
<svg viewBox="0 0 981 980" class="cooler">
  <g fill="#000" fill-rule="nonzero">
    <path
      d="M98 87c-15 9-19 28-11 43 14 24 49 21 58-5 9-21-7-43-31-43-6 0-11 1-16 5zM419 454a81 81 0 0 0 61 117c44 6 86-25 92-69 7-54-39-100-94-92-23 3-48 22-59 44zM851 87c-9 4-17 17-17 27l4 13c15 33 62 22 62-14 0-24-27-39-49-26zM855 837c-10 4-14 8-18 18-4 9-3 16 1 26 6 12 18 18 32 17 17-1 28-12 29-29 1-14-5-26-17-32-10-5-18-5-27 0zM100 838c-29 15-19 60 14 60 24 0 40-22 32-43-5-10-9-14-18-18-10-5-18-5-28 1z"
    />
    <path
      d="M43 3C32 7 21 15 13 26 0 43 1 9 1 494l1 440 4 9c6 13 18 25 31 32l11 5h887l11-5c12-7 25-19 31-32l4-9V47l-5-11c-6-13-19-25-32-31l-9-4-441-1C71 0 53 0 43 3zm101 52c12 6 25 19 31 32 4 9 5 14 5 27s-1 17-6 28c-8 15-18 25-33 32s-37 7-52 0a66 66 0 0 1-34-83c5-15 21-32 36-37 14-6 39-5 53 1zm402-3a443 443 0 0 1 384 483 443 443 0 0 1-483 394A443 443 0 0 1 94 298 443 443 0 0 1 546 52zm351 4c14 8 26 22 31 35 6 16 5 38-2 52-7 13-19 25-32 31-16 7-37 7-53 0a65 65 0 0 1 5-122c4-2 12-2 24-2 15 0 18 1 27 6zM133 804c19 6 33 17 42 36 7 16 7 37 0 53-6 13-17 25-31 32s-36 8-52 2c-13-5-27-17-35-31-5-9-5-12-5-29s0-21 4-29c14-29 47-43 77-34zm760 2c14 7 24 16 31 30a64 64 0 0 1-87 87 65 65 0 0 1 12-119c12-4 32-3 44 2z"
    />
    <path
      class="cooler__blades"
      d="M535 103c35 57 48 96 50 148 1 45-6 78-26 121l-10 20 10 6 17 16 9 9 12-9c16-13 39-37 51-54 33-50 48-109 48-192v-32l-25-13c-46-22-96-35-147-40l11 20zm-174 0a418 418 0 0 0-133 77l21 6c28 6 60 18 84 30 58 30 99 77 122 142 7 18 8 20 12 20l24-1 19-1 2-10c3-19 1-63-2-81-9-42-28-81-61-122-14-19-61-67-64-67l-24 7zm440 125l-5 21c-25 106-81 172-172 205-19 7-21 8-20 12l1 24v19l17 2c22 3 39 3 61-1 62-9 115-39 177-98l27-27-8-24c-16-50-42-95-76-135l-2 2zM85 458l19-12 42-23c73-37 160-36 232 2l15 7 6-9 16-18 9-8-11-14c-37-47-88-76-155-90-28-6-52-8-89-8h-32l-13 26c-21 46-35 96-39 147zm212 12c-61 10-121 44-182 106l-19 19 8 24c16 50 42 95 76 135l8-25c16-65 36-103 71-139 28-29 59-49 100-64 18-6 20-7 20-11l-1-24-1-19-16-3c-21-2-42-2-64 1zm584 63c-55 35-106 52-158 52-40 0-72-8-112-26l-21-11-7 10c-3 5-10 13-15 17l-10 9 12 14c52 66 130 97 243 97h33l12-25c22-46 36-96 40-147l-17 10zm-495 34c-16 12-41 38-52 55-33 50-48 109-48 190v32l15 8c49 25 103 40 158 45l-12-20c-35-58-49-104-49-156 0-41 7-72 26-113l9-19-9-7-18-15-8-10-12 10zm97 37l-10-1-2 11c-3 20-2 63 2 81 12 59 46 114 104 172l20 19 24-8c49-17 95-43 134-77l-25-7c-34-9-56-17-80-29-59-30-99-77-122-143-4-11-9-20-10-20l-13 2h-22z"
    />
  </g>
</svg>
<script>
  const cooler = document.querySelector(".cooler");
  const coolerBlades = cooler.querySelector(".cooler__blades");
 
  function on() {
    cooler.classList.add("cooler--state_on");
  }
 
  function off() {
    cooler.classList.remove("cooler--state_on");
  }
  function setSpeed(speed) {
    coolerBlades.style.animationDuration = 1 / speed + "s";
  }
  setTimeout(function() {
    on();
  }, 1000);
  setTimeout(function() {
    setSpeed(1);
  }, 1000);
  setTimeout(function() {
    setSpeed(5);
  }, 3000);
  setTimeout(function() {
    off();
  }, 5000);
</script>