Fan speed animation based on fan speed from entity

[vajonam]

in this example I am chagning the speed of animation of a fan icon based on the speed of the fan.

yaml

here the fan entity from home assistant returns low,medium and high which I can read from the entity attribute.

  - entity: fan.office_fan
    element: fan.fan_01
    state_action:
      action: call-service
      service: floorplan.class_set
      service_data:
        class: '${(entity.state === "on") ? "spin-" + entity.attributes.speed : ""}'

I have 3 classes that set based on the entity attribute but can easily changed to entity state if the state has more than 2 responses. IT also changes the colour of the fan, so yellow, orange to dark orange for speeds.

css

.spin-low {
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: rgb(245 255 0) !important;
  stroke: rgb(245 255 0) !important;
}

.spin-medium {
  animation-name: spin;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #ffa600 !important;
  stroke: rgb(245 255 0) !important;
}


.spin-high {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%; 
  transform-box: fill-box;
  fill: #ff5100 !important;
  stroke: rgb(245 255 0) !important;
}

result