Une autre animation :
Code de la carte
custom_fields:
circle: |
[[[
return `
<div class="shadow_circle">
<div class="shadow shadow_blue"></div>
<div class="shadow shadow_red"></div>
</div>
`
]]]
aspect_ratio: 5/2
card: null
hold_action:
action: none
icon: 'mdi:alarm-light'
name: Alarme
show_name: true
styles:
custom_fields:
circle:
- position: absolute
- z-index: 1
- height: inherit
- width: inherit
- top: 0
card:
- color: white
- border: |
[[[
if (states["input_boolean.test2"].state == 'on') return '2px solid red';
else return '2px solid var(--primary-color)';
]]]
- border-radius: 10px
icon:
- z-index: 2
- top: 2%
- color: '#fa3241'
name:
- z-index: 3
- font-variant: small-caps
type: 'custom:button-card'
style: |
.shadow_circle {
height: 500px;width: 500px;
}
#card {
{% if is_state('input_boolean.test2', 'on') %}
animation: alert_border 2s infinite !important;
-webkit-animation: alert_border 2s infinite !important;
{% else %}
border: 2px solid var(--primary-color);
{% endif %}
;
}
#name {
{% if is_state('input_boolean.test2', 'on') %}
animation: alert_name 2s infinite !important;
-webkit-animation: alert_name 2s infinite !important;
{% else %}
color: var(--primary-color);
{% endif %}
;
} #img-cell {
{% if is_state('input_boolean.test2', 'on') %}
animation: rotate_icon 1s !important;
-webkit-animation: rotate_icon 1s !important;
animation-delay: 1s;
{% else %}
color: var(--primary-color) !important;
{% endif %}
;
} #img-cell > #icon {
{% if is_state('input_boolean.test2', 'on') %}
animation: alert_icon 2s infinite ease !important;
-webkit-animation: alert_icon 2s infinite ease !important;
animation-delay: 1s !important;
{% else %}
color: var(--primary-color) !important;
{% endif %}
;
} .shadow {
background-position: center center;
background-size: 100% 100%;
border-radius: 50%;
bottom: 0px;
left: 0px;
margin: auto;
right: 0px;
top: 0px;
position: absolute;
} .shadow_blue {
{% if is_state('input_boolean.test2', 'on') %}
animation:alert_ani 2s infinite;
-webkit-animation:alert 2s infinite;
animation-delay: -1s;
{% else %}
display: none;
{% endif %}
} .shadow_red {
{% if is_state('input_boolean.test2', 'on') %}
animation:alert_ani 2s infinite ease-in;
-webkit-animation:alert 2s infinite;
{% else %}
display: none;
{% endif %}
} .shadow_blue {
box-shadow: rgb(0 104 255 / 20%) 0px 0px 0px 0px, rgb(0 104 255 / 20%) 0px 0px 0px 800px inset;
} .shadow_red {
box-shadow: rgb(255 0 0 / 20%) 0px 0px 0px 0px, rgb(255 0 0 / 20%) 0px 0px 0px 800px inset;
} @keyframes alert {
0% {
width: 0px;
height: 0px
}
50% {
width: inherit;
height: inherit;
box-shadow: 0 0 0 1px rgba(255, 0, 0, 0), 0 0 0 4px rgba(255, 0, 0, 0) inset;
}
51% {
width: 0px;
height: 0px;
}
100% {
width: 0px;
height: 0px;
}
} @keyframes rotate_icon {
0% {
transform: rotate(0);
}
100% {
transform: rotate(3.142rad);
}
}
@keyframes alert_icon {
0% {
top: -2%;
transform: rotate(3.142rad);
color: blue;
}
24% {
color: blue;
}
40% {
color: blue;
}
75% {
color: #fa3241;
}
100% {
top: -2%;
transform: rotate(3.142rad);
color: #fa3241;
}
} @keyframes alert_name {
0% {
color: #fa3241;
}
24% {
color: #fa3241;
transform: scale(1.5);
}
55% {
color: #fa3241;
transform: scale(1);
}
60% {
color: blue ;
}
75% {
color: blue;
transform: scale(1.5);
}
100% {
color: blue ;
}
}
@keyframes alert_border {
0% {
border: 4px solid #fa3241;
}
55% {
border: 4px solid #fa3241;
}
60% {
border: 4px solid blue;
}
100% {
border: 4px solid blue;
}
}