Ich muss jetzt nochmals fragen zu einer Animation des Akku Symbols mdi:battery-high:
Im CSS steht:
/* Icons for Battery */
:root {
--empty: 'M16,20H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z';
--low: 'M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16';
--medium: 'M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 11.5H9V14.5H15V11.5Z';
--high: 'M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 7H9V10H15V7M15 11.5H9V14.5H15V11.5Z';
}
/* Statische Füllstände, wenn keine Animation aktiv ist */
.battery_empty path {
d: path(var(--empty));
}
.battery_low path {
d: path(var(--low));
}
.battery_medium path {
d: path(var(--medium));
}
.battery_high path {
d: path(var(--high));
}
/* Animation nur für die Richtung */
.battery_charge path {
animation: charge 4s linear infinite;
}
.battery_discharge path {
animation: discharge 4s linear infinite;
}
.battery_stop path {
animation: none !important;
}
/* Animation for battery */
@keyframes charge {
0% {
d: path(var(--empty));
}
25% {
d: path(var(--low));
}
50% {
d: path(var(--medium));
}
75% {
d: path(var(--high));
}
100% {
d: path(var(--high));
}
}
@keyframes discharge {
0% {
d: path(var(--high));
}
25% {
d: path(var(--medium));
}
50% {
d: path(var(--low));
}
75% {
d: path(var(--empty));
}
100% {
d: path(var(--empty));
}
}
Ich habe extra einen Datenpunkt angelegt der mit beim laden positive Werte schreibt und beim entladen negative Wert schreibt. Bei überschreiben habe ich dies stehen:
{
"default": {
"class": "val => Math.abs(Number(val)) >= 100 ? 'battery_stop' : (Number(val) > 0 ? 'battery_charge' : Number(val) < 0 ? 'battery_discharge' : 'battery_stop')"
}
}
[image: 1777391397567-02774320-15bd-40bd-a9fb-765eb428447d-image.jpeg]
Die Animation läuft hoch und runter je nach Wert nur stoppt diese nicht bei 100%. Wo liegt mein Fehler?
