Animations

[citaconrama]

Hi! Thank you for your card, it is so cool! My question: Is it possible to add an animation depending on the state of the entity?

Something like this:

entities:
- entity: binary_sensor.frigorifico_puertas
show_icon: true
show_state: true
icon:
conditions:
- icon: mdi: fridge
condition: equals
value: 'on'
styles:
animation: blink 2s ease infinite
color: black

[marcokreeft87]

That would be a cool feature! Lets put it on the todo list :) Maybe some others would have more suggestions for animations?

[marcokreeft87]

@starbotica I was gonna try and implement this yesterday but while I was looking at it, I saw how much css goes into this. And they I was thinking, the card has conditional styling. Why not use that. So I think for now, that will have to do. But I will leave this feature request open, maybe I will find a nice way to do it with less css

[tiagof]

Hi. I'd love to have this functionality as well.
The current way of doing this (as far as I know) is a bit "ugly" and would love a cleaner way to do it:

- title: Garagem
  type: custom:room-card
  icon: mdi:garage
  show_icon: true
  rows:
    - entities:
        - entity: fan.ventilacao
          name: Ventilação
          template: fan
  style: |
    @keyframes spin {
      from {transform:rotate(0deg);}
      to {transform:rotate(360deg);}
    }
  templates:
    - name: fan
      template:
        show_icon: true
        state_color: true
        tap_action:
          action: toggle
        icon:
          template:
            styles: >
              if (entity.state == 'on') return 'animation: spin 1s infinite linear;';

Great work with this card!!

ps: it requires card-mod