Custom:button-card - Icon Spinning

Configuration Frontend
1

Team.

What i am trying to do is have my fan icon spin only when its on. The code i have knocked up below has the icon spinning when on or off. What do i need to change?

Thanks in advance

type: custom:button-card
entity: input_boolean.livingroom_fan_speed_1
name: Low
icon: mdi:fan
color: red
state:
  - value: 'on'
    color: green
styles:
  icon:
    - animation:
        - rotating 2s linear infinite
1 Like
2

worked it out

type: custom:button-card
entity: input_boolean.office_fan_speed_1
name: Low
icon: mdi:fan
color: red
state:
  - value: 'off'
    color: red
    styles:
      icon:
        - animation: null
  - value: 'on'
    color: green
    styles:
      icon:
        - animation: rotating 2s linear infinite
3

You can also have something similar to:

style:
  icon:
    - animation: |
       [[[
         if (states["climate.panasonic_reni"].state != "off") {
           if (states["climate.panasonic_reni"].attributes.fan_mode == "Auto" ||
               states["climate.panasonic_reni"].attributes.fan_mode == "Low") return 'rotation 3s infinite linear'
           if (states["climate.panasonic_reni"].attributes.fan_mode == "LowMid") return 'rotation 2s infinite linear'
           if (states["climate.panasonic_reni"].attributes.fan_mode == "Mid") return 'rotation 1.5s infinite linear'
           if (states["climate.panasonic_reni"].attributes.fan_mode == "HighMid") return 'rotation 1s infinite linear'
           if (states["climate.panasonic_reni"].attributes.fan_mode == "High") return 'rotation 0.5s infinite linear'
         }
         return 'none'
       ]]]
4

Thanks for sharing!