Element mit Javascript/CSS und transform in einem Bogen verschieben

[Rolf B]

Hallo T-Rex,

das Problem mit transform ist, dass die Anzahl der verfügbaren Funktionen auf Geraden und Kreise beschränkt ist. Sicherlich kann man durch eine Kombination von Verschiebungen und Drehungen eine Art "Hüpfen" hinbekommen. Die Trajektorie wird dann aber ein Halbkreis oder ein Ellipsenbogen sein, keine Parabel.

Ich denke, dass Du an dieser Stelle an der Grenzen von CSS Animationen angekommen bist. Der Browser führt nach solchen Animationen vermutlich viel zu viele Re-Layouts durch. Um solche Dinge flüssig laufen zu lassen, braucht man Hardware-Unterstützung durch die Grafikkarte,

Hier hilft dir das <canvas> Element und die schon angesprochene requestAnimationFrame Funktion. Es gibt dazu einige Abschnitte in unserem Wiki, und auch Tutorials im MDN. Ich persönlich habe das noch nie benutzt und weiß darum nicht, wie effizient das Canvas-API ist.

Rolf