@@Killua > Ich versuche mich erstmals an CSS Animationen. > > Jedoch gibts schon am Anfang, bei der bloßen [Transition](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Transition) Fragen. Dein Problem hat nichts mit Animation/Transition zu tun. > So wollte ich eine Grafik einblenden bewegen und skalieren, alles mit einem Hover. Leider kann man scheinbar nicht alle möglichen transform Anweisungen kombinieren? Doch, kann man. Man muss es nur richtig™ machen. > ~~~css > .headerlogo:hover { transform: translateY(-1000px); } > .headerlogo:hover { transform: scale(5); } > ~~~ Du gibst hier für den Selektor `.headerlogo:hover` die Deklaration `transform: translateY(-1000px)` an. Unmittelbar danach überschreibst du diese mit `transform: scale(5)`; der vorige Wert ist damit futsch. > Nun wird die Grafik beim Hover sichtbar und skaliert. Aber es findet keine Bewegung Richtung Y statt. Das sollte jetzt nicht mehr verwundern … > Drehe ich die Reihenfolge um, sodass `translateY()` nach `scale()` steht, dann wird nicht skaliert ... … und das auch nicht mehr. > Die **Frage** ist: Gibt es im Bereich der CSS Animationen irgendwelche Regeln, Grenzen, was man wie kombinieren darf? Ja. Jedes Element hat jede CSS-Eigenschaft genau einmal. Wenn du Verschiebung und Skalierung kombinieren willst, müsstest du das in *einer* `transform`-Deklaration tun: > ~~~css > .headerlogo:hover { transform: translateY(-1000px) scale(5); } > ~~~ bzw. (je nachdem, was du willst) > ~~~css > .headerlogo:hover { transform: scale(5) translateY(-1000px); } > ~~~ Oder du verwendest die CSS-Eigenschaften [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate) und [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale): > ~~~css > .headerlogo:hover { translate: 0 -1000px; scale: 5; } > ~~~ 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter

@@Killua > Ich versuche mich erstmals an CSS Animationen. > > Jedoch gibts schon am Anfang, bei der bloßen [Transition](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Transition) Fragen. Dein Problem hat nichts mit Animation/Transition zu tun. > So wollte ich eine Grafik einblenden bewegen und skalieren, alles mit einem Hover. Leider kann man scheinbar nicht alle möglichen transform Anweisungen kombinieren? Doch, kann man. Man muss es nur richtig™ machen. > ~~~css > .headerlogo:hover { transform: translateY(-1000px); } > .headerlogo:hover { transform: scale(5); } > ~~~ Du gibst hier für den Selektor `.headerlogo:hover` die Deklaration `transform: translateY(-1000px)` an. Unmittelbar danach überschreibst du diese mit `transform: scale(5)`; der vorige Wert ist damit futsch. > Nun wird die Grafik beim Hover sichtbar und skaliert. Aber es findet keine Bewegung Richtung Y statt. Das sollte jetzt nicht mehr verwundern … > Drehe ich die Reihenfolge um, sodass `translateY()` nach `scale()` steht, dann wird nicht skaliert ... … und das auch nicht mehr. > Die **Frage** ist: Gibt es im Bereich der CSS Animationen irgendwelche Regeln, Grenzen, was man wie kombinieren darf? Ja. Jedes Element hat jede CSS-Eigenschaft genau einmal. Wenn du Verschiebung und Skalierung kombinieren willst, müsstest du das in einer `transform`-Deklaration tun: > ~~~css > .headerlogo:hover { transform: translateY(-1000px) scale(5); } > ~~~ bzw. (je nachdem, was du willst) > ~~~css > .headerlogo:hover { transform: scale(5) translateY(-1000px); } > ~~~ Oder du verwendest die CSS-Eigenschaften [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate) und [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale): > ~~~css > .headerlogo:hover { translate: 0 -1000px; scale: 5; } > ~~~ 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter