CSS Animationen kombinieren

[Killua]

Ich versuche mich erstmals an CSS Animationen.

Jedoch gibts schon am Anfang, bei der bloßen Transition Fragen.

So wollte ich eine Grafik einblenden bewegen und skalieren, alles mit einem Hover. Leider kann man scheinbar nicht alle möglichen transform Anweisungen kombinieren?

HTML: <img class="headerlogo" id="logoimheader" src="bubbles2.png">

CSS:

.headerlogo { width: 10vw; height: auto; opacity: 0; transition: all 3s; }
.headerlogo:hover { opacity: 1; }
.headerlogo:hover { transform: translateY(-1000px); }
.headerlogo:hover { transform: scale(5); }
.headerlogo#logoimheader{ transition: all 3s;}

Nun wird die Grafik beim Hover sichtbar und skaliert. Aber es findet keine Bewegung Richtung Y statt.

Kommentiere ich z.B. scale() aus, wird eingeblendet und es fährt hoch. (Da habe ich aber das (noch nebensächliche) Problem, dass, sobald es aus dem Mausbereich flutscht, auch mit der Bewegung aufhört.)

Drehe ich die Reihenfolge um, sodass translateY() nach scale() steht, dann wird nicht skaliert ...

Die Frage ist: Gibt es im Bereich der CSS Animationen irgendwelche Regeln, Grenzen, was man wie kombinieren darf?

---

Bitte keine Hinweise bez. Sinn und Unsinn von Animationen und wie sehr das irgendwelche Besucher stören und nerven könnte. Das ist mir wurst, wer weiß ob ich so etwas je wo einsetze. Dzt. ist es nur Spielerei am XAMPP.