Floorplan CSS animation slowdowns

I’m finalising the floorplan integration for my home setup. All is working well, except that I notice strong slowdowns with animations enabled. These do not work at all in Safari and my fans end up spinning out of control all over the screen. Works OK with Firefox, but I get a lot of slowdowns, even on powerful laptops, to the point that I am considering disabling them altogether. It reminds me of the endless spinning icon one gets when overloading the history_graph component…

Does anyone use 3+ animations on floorplans with success? Any tip to share?

For reference, here is my code:

Yaml:

- name: Climate fans
    entities:
      - switch.fan_living_1
      - switch.fan_living_2
      - switch.fan_living_3
#      - switch.fan_kitchen
#      - switch.fan_luke
#      - switch.fan_liv
#      - switch.fan_noa
#      - switch.fan_ced
    states:
      - state: 'on'
        class: 'fan-on'
      - state: 'off'
        class: 'fan-off'

CSS:

#switch\.fan_living_1, #switch\.fan_living_2, #switch\.fan_living_3, #sensor\.ac_living_1_power, #sensor\.ac_living_2_power, #sensor\.booster_pump_power, #sensor\.pool_pump_power, #sensor\.well_pump_power, #sensor\.washing_machine_power {
  transform-origin: center;
}

.fan-on {
  fill: #ff8a65 !important;
  stroke: #000000 !important;
  stroke-width: 0.5px !important;
  stroke-opacity: 1 !important;
  -webkit-animation: rotation 2s infinite linear;
}

.fan-off {
  fill: #000000 !important;
  fill-opacity: 0.3 !important;
}

As always, any help is much appreciated and I also hope some users find some help to achieve their objective with this post…

i have the same problem, it takes like 2-3 seconds to trigger my CSS display none or block on every click. did you ever figure out how to optimize floorplan so that the CSS would trigger inconstantly?