Guys, I made an animation of a kitchen hood, I have a question - how in this case can I make the so-called steam/smoke and its appearance from bottom to top when it appears on the icon? So that it would be animated all the time from bottom to top.
- type: custom:mushroom-template-card
layout: vertical
icon: cil:cooker-hood-trapezoid
icon_color: |-
{% if is_state('binary_sensor.cooker_hood', 'on') %}
amber
{% else %}
{% endif %}
primary: ΠΡΡΡΠΆΠΊΠ°
secondary: "{{ states('sensor.kitchen_cooker_hood_power_socket_power') | round(1) }} W"
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
animation: air 3s ease-in-out infinite;
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: inset(0 0 38% 0); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}