Fragen? Antworten! Siehe auch: Alternativlos
Wenn ich ein Bild zentriert über dem Rest positionieren will, dann nehme ich sowas hier:
position: fixed;Und das funktioniert auch ganz gut. So, jetzt will ich dieses Bild da aber nicht nur hinblenden, sondern es soll von oben angeflogen kommen. Wir reden hier von wichtigen Business-Bildern, ihr versteht schon, die müssen sich bewegen!
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Dafür definiere ich eine Animation mit zwei Keyframes, die zwischen zwei translate-Statements iterieren sollen.
Nun stellt sich raus, dass das translate aus der Animation nicht etwas nach dem translate aus der Positionierung angewendet wird, sondern stattdessen. Ich befürchte jetzt, dass ich da für jede Kombination aus Richtung und Positionierung eine eigene Animation definieren muss. Das kann ja wohl nicht ernsthaft so sein. Also, was ist die Lösung?
Ich könnte jetzt ein div um das zu animierende Element machen, klar, aber das würde das Markup der Folien komplexer machen, und Komplexität ist der Feind. Das kommt also nicht in Frage. Ich könnte diese div-Elemente per Javascript in den DOM reinfummeln. Das würde ich gerne nur als letzten Ausweg nehmen.
Gibt es keine Möglichkeit, beim Animieren zu sagen, dass er bitte den translate-Teil aus dem Style des Elements übernehmen und nicht überschreiben soll? Ich finde gerade keine beim Rumklicken.
Update: Der Hack, der mir hier weitergeholfen hat, ist, die Animation nicht über translate zu machen sondern über margin-left und margin-top.