custom style: trigger css animation on value change?

[prankousky]

Dear community,

I know very little about css and even less about js, but thought I'd get away with creating a custom style, anyway ;)

I created a variables.yaml (using the example content from from Skin Development. I then created a dashboard.css containing this

.value {
  color: green;
  text-shadow: 2px 2px black;
  font-weight: 900;
  animation: slideInUp 500ms 1;
}

The animation is taken from a css library, not written by myself. And it works in general: when I (re)load the dashboard, the value will be animated once for 500ms. However, I would like to re-trigger this animation each time the actual value changes - and only then.

This is the widget in question

dercounter:
  title: Counter
  widget_type: sensor
  entity_id: input_number.obs_counter

Whenever Home Assistant changes the value of this input_number entity, I'd like the new value to slideInUp as definied in the css file. However, it will currently only do this once when loading the page (and I understand that this is expected behavior - I just don't know how to adapt it to my needs).

Can you please help me with this? Thank you in advance for your ideas :)

[ReneTode]

im not sure if thats possible without modifying the javascript file from the widget.

for certain the skin files is the wrong place, because the skins have no knowledge from individual widgets. and value isnt the value from a widget, so i got no clue what triggers it at restart.

im afraid that you wont get that working as you want without learning JS and creating a custom widget.