CSS-Transformationen kombinieren

[Gunnar Bittersmann]

@@Killua

Ich versuche mich erstmals an CSS Animationen.

Jedoch gibts schon am Anfang, bei der bloßen 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.

.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:

.headerlogo:hover { transform: translateY(-1000px) scale(5); }

bzw. (je nachdem, was du willst)

.headerlogo:hover { transform: scale(5) translateY(-1000px); }

Oder du verwendest die CSS-Eigenschaften translate und scale:

.headerlogo:hover { translate: 0 -1000px; scale: 5; }

🖖 Живіть довго і процвітайте