CSS Animation Support

[nathanashton]

Latest version of Room Card.

I'm trying to have an entity display a rotating icon when it's state is 'on'. I can get the color etc to change but not animations.

type: custom:room-card
style: >
  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(360deg);
  transform:rotate(360deg); } }
title: Outdoor
icon: mdi:lightbulb-outline
show_icon: true
tap_action:
  action: toggle
entity: switch.outdoorlights
state_color: true
entities:
  - entity: switch.zcafelights_switch
    show_icon: true
    name: Bar Lights
    tap_action:
      action: toggle
    icon:
      template:
        styles: >
          if (entity.state == 'on') return 'animation: spin 4s infinite
          linear;color: green;'
        icon: |
          return 'mdi:car';
  - entity: switch.zgardenlights_switch
    icon: mdi:light-flood-up
    show_icon: true
    name: Garden Lights
    tap_action:
      action: toggle
    state_color: true

[marcokreeft87]

It's best to use card_mod for this. That has support for templating in styles