Animierte interaktive Knöpfe für Home Assistant

[Amon]

Einzigartige Designs und Animationen machen Home Assistant Dashoboards noch schöner und verständlicher für jeden

Mehr ist besser

Man kann die unterschiedlichen Animationen miteinander verknüpfen

---

Controlling the Animation in your Card

The animations can be controlled using a Jinja Template condition on the animation command.

For example if I wanted an animation when my coffee machine is on I would use an if statement like this:

{{ 'animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}

Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening the {% else %} is technically not even required.

{% if is_state(config.entity, 'on') %}
  animation: java 4s linear infinite;
{% else %}

{% endif %}

Or if I wanted to have the dryer animate when the load is over 4w I would do this:

{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}

Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening the {% else %} is technically not even required.

{% if states(sensor.dryer_power) | float > 4  %}
  animation: shake 400ms ease-in-out infinite, drum 1s infinite;
{% else %}

{% endif %}

You will need to add the if condition for each animation:, --icon-animation: or --shape-animation: command in the card.

Added by Dimitri.
This is not true if you complete the if statements in the way that i have showed. that is unless you need the animations to be based on different conditions.

Quelle: community.home-assistant.io

---

Hier die Original Posts aus dem Home Assistant Commnity Forum

Updated Posts
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5