#code for those interested
lofty frost
card_mod:
style:
'*:first-child$': |-
state-badge {
{% if is_state('fan.guest_bedroom', 'on') %}
animation: rotating 2s linear infinite;
{% endif %}
}
@keyframes rotating {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
harsh depot
I've just recently started playing with some animations. These are two that I use with a custom:button-card. (They are constantly animated and don't rely on state.)
styles:
icon:
- animation:
- rotating 10s linear infinite alternate
styles:
icon:
- animation:
- rock 3s linear infinite
extra_styles: |
@keyframes rock {
0% {transform: rotatez(15deg)}
25% {transform: rotatez(30deg)}
50% {transform: rotatez(15deg)}
75% {transform: rotatez(0deg)}
100% {transform: rotatez(15deg)}
Code shortened; also has 'off' and 'unavailable' states which are not animated.yaml state: - color: rgb(255,0,0) operator: '==' value: 'on' icon: mdi:motion-sensor styles: name: - color: white icon: - animation: blink 2s ease infinite
carmine jungle