Custom: button-card making rotating animation smoother?

Configuration
1

Dear all!

I have a quite specific problem with custom: button-card. I created card showing a fan icon with linear infinite rotating animation and replaced the fixed rotation time to be determined by the state of my fan actual rotation speed.

So, the original function was “animation: rotating 2s linear infinite” or “animation: rotating 3s linear infinite” and the current code is the following:

        styles:
          icon:
            - animation: >
                [[[ return 'rotating ' +
                (states['sensor.air_purifier_fan_speed'].state)
                + 's linear infinite'  ]]]

It works, but the very moment when the fan speed changes (increases or decreases) the icon makes and odd move. It is due to that in this case not only the icon rotation speed changes, but the rotation cycle is also interrupted. When the fan speed changes, the icon rotation doesn’t continue its cycle at a lower or higher speed, but immediately jumps back to its initial state and start slowing down / speeding up only after then. It causes little jumps every time speed changes.

Is there a way to make it smoother?

I tried to capture a video and show you how it behaves:
fan_rotation

2 
  - animation: >
        [[[ return 'rotating ' +
        (states['fan.living_room_fan'].attributes.percentage) /100
        + 's linear infinite'  ]]]