Als Nachfolge zu Jheys kürzlichem Beitrag über responsive Bewegungspfade, weist Michelle Barker darauf hin, dass ein weiterer Ansatz darin bestehen könnte, das gesamte Element einfach mit transform: scale() zu skalieren.
Der Kompromiss dabei ist, dass sowohl der Pfad als auch der ... skaliert werden.
Es gab kürzlich eine Diskussion im Animation at Work Slack: *Wie kann man einen CSS-Bewegungspfad responsiv gestalten?* Welche Techniken wären dafür geeignet? Das hat mich zum Nachdenken gebracht.
Ein CSS-Bewegungspfad ermöglicht es uns, Elemente entlang ...
Cassie Evans hat eine großartige Einführung in Bewegungsanimationen (motion paths). Das bedeutet, ein Element entlang eines Pfades animieren zu können. Nicht nur hoch/runter/links/rechts, sondern egal welchen kurvigen/wackeligen/seltsamen Pfad Sie wollen.
Es ist ein interessantes Thema, da es so viele verschiedene …
Modals erscheinen immer nur. Man sieht vielleicht mal einen, der von einer der Kanten herein slidert, oder eine Art Skalierung/Opacity nutzt, um von „oben“ oder „unten“ zu erscheinen. Aber wir können auch verrücktere Dinge tun …
Die offset-anchor-Eigenschaft definiert einen Punkt innerhalb der Box, auf die sie angewendet wird, als Ankerpunkt, der sich entlang des offset-path bewegt.
Das ist etwas umständlich ausgedrückt, also lassen Sie uns das ein wenig aufschlüsseln. …
Diese Eigenschaft begann ihr Leben als motion-path. Diese und alle anderen verwandten motion-* Eigenschaften werden in dem Standard in offset-* umbenannt. Wir ändern die Namen hier im Almanach. Wenn Sie sie sofort verwenden möchten, ist es wahrscheinlich am besten …
SMIL, die native Animationsspezifikation von SVG, wurde wegen ihrer vielen Vorteile für performante SVG-Animationen hoch geschätzt. Leider nimmt die Unterstützung für SMIL in WebKit ab und gab es (und wird es wahrscheinlich auch nie geben) für Microsofts …
