YAML syntax - animation issue

Configuration Frontend
1

Struggling with animation with card mod.

This code works as expected:

type: entities
entities:
  - type: custom:template-entity-row
    entity: switch.pool_r1
    icon: mdi:pump
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes colorize {
            0% {
              background: yellow;
            }
            100% {
              background: yellow;
            }
          }

BUT this code don’t:

type: custom:template-entity-row
entity: switch.pool_r1
icon: mdi:fan
card_mod:
  style:
    div#wrapper: |
      state-badge {
        {% if is_state('switch.pool_r1', 'on') %}
          animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
        {% endif %}
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes colorize {
        0% {
          background: yellow;
        }
        100% {
          background: yellow;
        }
      }

Yaml is valid but animation don’t work.
Can anyone give a hint what’s missing.

2

Read the FAQ at the bottom of the page.

3

Especially the 1st point.
Explanation: t -e-r when wrongly used as a card (i.e. not in Entities card) does not have a ha-card element.

4

Thank’s both for tips. Got it work from this !

5

Do not mark a non-solution as a solution. Mark the post that provided the solution, thanks.

If you want to mark your own post as a solution, actually provide the solution in your post instead of a blanket statement “I got it working”.

2 Likes
6

I appologize! Tips made be aware that it only works with

entities so code below work’s as expected

type: entities
entities:
  - type: custom:template-entity-row
    entity: switch.pool_r1
    icon: mdi:pump
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes colorize {
            0% {
              background: yellow;
            }
            100% {
              background: yellow;
            }
          }
7

Same color?

8

Yes,I’ve tried with different colors but don’t get expected results. Keep working on this but not a major issue right now. The important part is that animation work’s when pump is on. Maybe theme overrides color setting somehow,I don’t know ?? I have to study more to understand how code works.

9

Check this:

1 Like