Eigene Animation bleibt nicht am Endpunkt stehen

[mfd]

Beim Erstellen einer eigenen Animation besteht das Problem, dass diese nach Ablauf wieder an den Ausgangspunkt zurückspringt. Das Verhalten ist so nicht gewünscht, wenn z.B. ein Element um eine bestimmte Pixelanzahl per Animation verschoben werden soll. Gibt es dafür eine (CSS)-Lösung?
Einfaches Beispiel

100% {-webkit-transform:translateX(8px) translateY(-8px);}

-webkit-animation-fill-mode:forwards

sollte das angeblich bewerkstelligen, scheint aber nicht zu funktionieren. Oder ich bekomme es nur nicht richtig eingebaut...

[mfd]

Seltsam, niemand sonst hat das bisher bemerkt?
Vielleicht weiß gaert mehr...

[Janncsi]

Ich mache das etwas anders als du.

Ich gebe, je nach Wert des KO, dynamische Designs an. Nun setze ich in jedes dynamische Design folgenden CSS:

-webkit-transition: ease-in-out 0.5s; -webkit-transition-delay: 200ms;

Damit findet die Bewegung zu den neuen Koordinaten nur einmal statt.

Nimm ein Element und setze ein dynamisches Design auf KO=1 auf x0;y0 hast und ein zweites dynamischen Design mit KO=2 auf Δx 100px Δy 100px und entsprechend in beide dynamische Designs packst du obigen Code.

Nun hast du bei jeder Veränderung des KO nur einmal die Bewegung

[mfd]

Für einfache Bewegungen ist das eine Möglichkeit, aber für etwas komplexere Dinge ist das so schon weniger praktikabel.

Ich hatte bspw. etwas wie

50% {-webkit-transform:translateX(8px) translateY(-8px);}
100% {-webkit-transform:translateX(16px) translateY(0px);}

Das müsste man dann wohl in einzelne Schritte zerlegen, mit jeweils separatem KO-Wert
Dabei habe ich nur versucht eine Micro-Animation in EDOMI nachzubilden...

[JooNey]

Hey mfg,
ich wollte mal fragen, ob du eine Lösung für deine Herausforderung gefunden hast.

Ich stehe aktuell vor so ziemlich genau dem gleichen Problem. Theoretisch wäre es auch möglich die Animation in "Schritten" abzubilden, aber dann müsste man ja jeweils am Ende des aktuellen Animationsschrittes das KO verändern. Mir wäre nicht bewusst, wie das gehen könnte.

Über die "Animation" in den Design-Einstellungen kann man ja auch extrem viel umsetzen, allerdings habe ich da das Problem, dass bei jedem Reload der Seite die Animation ausgeführt wird. Eigentlich möchte ich die Animation aber nur ausführen, wenn ich auf das Element klicke. Vielleicht wäre das auch einfacher umzusetzen, allerdings wüsste ich hier ebenfalls nicht, wie!

Ideen? Vorschläge?

[Hendrik2020]

Kannst du da nicht einfach die Animation nur bei nem speziellen KO-Wert abspielen lassen. Und dann nen Zähler in eine Logik oder nen Timer das man nur 10 sekunden oder so macht und dann wieder auf „0“ setzt?

[JooNey]

Daran hatte ich auch schon gedacht, ist allerdings auch nicht wirklich optimal. Zum Einen habe ich zwei Animationen auf dem Objekt, welche einmal zu Status KO = 1 und dann entsprechend zu Status KO = 0 ablaufen sollen, und zum anderen: wie stellt man die Zeit am Sinnvollsten ein? Falls sie zu lang ist, dann habe ich den Effekt wie oben, oder auch doof: die falsche Animation. Wähle ich sie sehr kurz, dann habe ich andauernd Traffic oder Logik-Rechnerei auf der Edomi. Ja, ist sicherlich eine Option, aber ich dachte, es gibt evtl. auch "elegantere" Möglichkeiten.

Wird dann natürlich auch wieder bei N-Elementen knuffig, da man für jedes die Logik aufbauen muss. (Ich weiß, dass das per C'n'P sehr leicht geht, aber je weniger schlanker etwas aufgebaut werden kann, desto besser. )

[JooNey]

So, falls es eventuell irgendwann mal jemandem auch so geht, oder jemand eine Idee braucht, wie man die Animationen "anhalten" kann, hier meine Lösung (ist aktuell nur "alpha" getestet, also erstmal nur mit einem Element, und nicht vielen, sodass ich noch nichts über das mögliche Timing sagen kann.)

Mein Ziel war es den Button aus diesem Beitrag (https://knx-user-forum.de/forum/proj...style-mit-css3) nachzubauen (weil ich den wirklich schick finde und er super in meine Visu passt! ). Das war initial nicht das Thema, die Animation war schnell gebaut. Allerdings war eben das Problem, dass, wenn ich die in dem Design mit ausgewählt habe, dass beim reload der Seite die Animation immer wieder ausgeführt wurde.

Gelöst habe ich es jetzt wie folgt:
1. KO für den Klick auf den Button. (KO_Click, DPT1)
2. KO für das dynamische Design. (KO_Dyn_Design, DPT3)
3. Dynamisches Design für
(Standard Design: "Button deaktiviert")
1>1: "Button aktiviert"
11>11: "Button aktiviert" + Animation Button AN
12>12: "Button deaktiviert" + Animation Button AUS
4. Logik.

Beim Klick auf den Button wird der Befehl KO_Click "Wechsel zwischen 0 und 1" ausgeführt.
Die Logik sieht dann wie folgt aus:
2021-08-07 12_48_08-EDOMI · Administration.png

[107] ist "KO_Click", die obere Ausgangsbox addiert zu dem KO +11 und setzt ein anderes KO (z.B. Leuchte AN/AUS oder so). Die untere Ausgangsbox schreibt nach der Verzögerung dann einfach nur den Status des KO_Click auf das KO_Dyn_Design, setzt es also von den Dynamischen Design Stati einfach auf den "normalen" Endstatus ohne Animation.

Ich glaube, damit kann ich leben. Es ist nicht zu umständlich für weitere Elemente zu erweitern, und sollte nicht zu viel Performance kosten.

Falls jemand eine andere/besser Idee hat, oder Verbesserungsvorschläge zu meiner Umsetzung, dann immer her damit.

Beste Grüße.