Fan not spinning on the spot!

Configuration Frontend
1

Hi all,

I’ve spent over a few hours trying to de-code this but it’s just beyond me. I added a fan icon to my bathroom and animated it. It’s a custom field, however the thing doesn’t just spin in-place, it also spins around the place a little… I’m sure it’s something simple…

type: custom:button-card
entity: light.bathroom
name: Bath
label: Bath
layout: icon_state
show_state: false
show_name: false
show_label: true
show_icon: false
size: 1.5em
custom_fields:
  mirrorlight:
    card:
      type: custom:button-card
      entity: switch.bathroom_mirror
      icon: |
        [[[ return states['switch.bathroom_mirror'].state === 'on' ?
          'mdi:mirror-variant' : ' ';
             ]]]
      show_state: false
      show_name: false
      show_icon: true
      tap_action:
        action: toggle
        entity: light.bathroom
      styles:
        card:
          - border: none
          - background: transparent
          - right: 0px
        icon:
          - color: lightblue
  bathroomfan:
    card:
      type: custom:button-card
      entity: switch.bathroom_fan
      icon: |
        [[[ return states['switch.bathroom_fan'].state === 'on' ?
          'mdi:fan' : ' ';
             ]]]
      show_state: false
      show_name: false
      show_icon: true
      tap_action:
        action: toggle
        entity: light.bathroom
      styles:
        card:
          - border: none
          - background: transparent
        icon:
          - color: |
              [[[ return states['switch.bathroom_fan'].state === 'on' ?
              ' ' : 'gray';
                ]]]
          - animation: rotating 1s linear infinite
styles:
  custom_fields:
    mirrorlight:
      - position: absolute
      - right: '-10px'
      - top: 23%
      - width: 45px
      - z-index: 1
    bathroomfan:
      - position: absolute
      - left: 12%
      - top: 25%
      - width: 45px
  grid:
    - grid-template-columns: 100%
    - grid-template-rows: 6fr
    - grid-template-areas: '"i" "l" "minutes"'
    - font-size: 7px
  card:
    - height: 60px
    - background-image: |
        [[[
          if (states['light.bathroom'].state == "on" )
            return 'url(/local/spot.png)';
        ]]]
    - background-color: |
        [[[
          if (states['light.bathroom'].state == "on" )
            return 'black' ;
          if (states['switch.bathroom_mirror'].state == "on" )
            return 'black' ;
          if (states['switch.bathroom_fan'].state == "on" )
            return 'black' ;
        ]]]
    - background-position: '-35px'
    - background-size: 157% 97%;
    - background-repeat: no-repeat
    - overflow: hidden
    - padding-bottom: 1px
  state:
    - padding-bottom: 37px
    - position: absolute
    - right: '-10px'
    - font-size: 11px
    - color: '#CCCCCC'
  label:
    - position: absolute
    - top: 39px
    - font-size: 13px
    - color: |
        [[[
        if (states['light.bathroom'].state === "on")
          return "yellow";
        if (states['switch.bathroom_mirror'].state == "on" )
            return "yellow" ;
        if (states['switch.bathroom_fan'].state == "on" )
            return "yellow" ;
        else if (states['light.bathroom'].state === "off")
          return "white";
        ]]]
tap_action:
  action: toggle
  entity: light.bathroom

image

2