CSS fliegende und vergrößern Logo auf gekrümmten Pfad

Question

Ich muss eine Animation mit CSS machen. Ein Logo, das auf der Basis eines gekrümmten Pfades oder einer Parabel in die Front fliegt und sich vergrößert. Ich habe eine kleine Skizze gemacht. Das Logo ist klein oben rechts, fliegt und wird größer und endet links in der Mitte. Sketch Ich fand viele Informationen über kubische Bezier auch kubische Bezier-Editoren, aber leider kann ich das nicht realisieren.

Die html

<div class="animation"><img src="logo.jpg"></div> 

Die CSS

.animation { 
    transition: all 500ms cubic-bezier(0.725, -0.385, 0.970, 0.465); 
    transition-timing-function: cubic-bezier(0.725, -0.385, 0.970, 0.465); 
} 

Dieses (von mehreren) war trys aber das Logo animiert nicht. Außerdem, wenn ich es verstehe, ist das nur der Weg ohne Skalierung. Wo ist mein Denkfehler?

Vielen Dank & Grüße!

Answer 1

Erstens, kubisch-Bezier ist eine Timing-Funktion, keine "Pfad" -Funktion. Es wird nicht das erreichen, wonach du suchst.

Zweitens, um das zu erreichen, was Sie wünschen, verwenden Sie die CSS3 matrix transition property in Verbindung mit a custom animation function with a custom step callback. Entweder das oder passen Sie CSS-Eigenschaften wie oben, links, Höhe und Breite direkt mit dieser Animationsfunktion an.

Viel Glück!