CSS/Tutorials/Animation/offset
Mit der offset-Eigenschaft können Sie HTML-Elemente und grafische SVG-Objekte entlang von Pfaden, die in der offset-path-Eigenschaft festgelegt sind, mit CSS-animation bewegen. Während CSS-transition und animation Elemente nur linear animieren können, werden so Kurven, Schleifen und elliptische Umlaufbahnen möglich.
Inhaltsverzeichnis
offset
Die Eigenschaft offset
ist eine Zusammenfassung der möglichen Einzelangaben offset-path, offset-distance, offset-anchor und offset-rotate.
offset-path
Die offset-path-Eigenschaft legt den Pfad fest, auf dem sich das zu animierende Objekt befindet und bewegt. Dieser Pfad kann entweder aus einem oder mehreren Pfaden oder einer geometrischen Grundform bestehen.
Sie können folgende Werte verwenden:
-
url
: Angabe einer URL für den Pfad -
basic-shape
: Angabe einer SVG-Grundform -
path()
: Pfadangabe innerhalb einer path()-Funktion; optional kann der Pfadangabe eine fill-rule vorangestellt werden. -
geometry-box
: -
none
: keine Animation (Standardwert)
.path {
offset-path: path('M300,100h300v100h-300z');
animation: run 6s linear infinite;
}
.reverse {
offset-path: path('M300,100h300v100h-300z');
animation: run 6s linear reverse infinite;
}
@keyframes run {
0% {
offset-distance: 0;
}
to {
offset-distance: 100%;
}
}
offset-distance
Mit der Eigenschaft offset-distance (alter Name: motion-offset) können Sie die Startposition vom Anfang des Pfades an eine gewünschte Stelle verschieben. Dies ist besonders bei Animationen, bei denen das Objekt am Bildrand erscheinen soll, interessant.
Folgende Angaben sind nötig:
-
Längenangabe
: positive oder negative Zahl oder eines Prozentwertes, 0 entspricht dem Anfang des Pfades, 100% dem Ende.
.path {
offset-path: path('M300,120 c100,-140 150,140 200,0 s200,-100 200,0 s0,100 -100,100 h-200 ...');
animation: run 6s linear infinite;
}
.zwei {
animation-delay: 0.5s;
}
@keyframes run {
0% {
offset-distance: 0;
}
to {
offset-distance: 100%;
}
}
animation-delay: 0.5s;
startet das gelbe Auto verzögert.Die Autos werden passend zur Bahnkurve gedreht. Das ist das Standardverhalten, was Sie mit der später beschriebenen
offset-rotate
-Eigenschaft beeinflussen können. Dass die Autos auf der zweiten Hälfte der Bahn fahren die Autos auf dem Kopf fahren, ist ein Zusatzeffekt dieser automatischen Rotation. Um dem gegenzusteuern, müsste man in den Keyframes im passenden Moment mit rotate(180deg)
gegensteuern.offset-anchor
Mit der offset-anchor-Eigenschaft können Sie einen Ankerpunkt des zu bewegenden Punktes festlegen.
Folgende Angaben sind möglich:
auto
: (Standardwert)position
:-
left, center, right, top, bottom
- Prozent- oder feste Längenangabe. So würde
offset-anchor: 100%, 0%;
die obere rechte Ecke des Objekts als Ankerpunkt festlegen.
-
Flugzeug mit der Angabe: offset-anchor: center;
#plane {
offset-path: path('M200,100 a90,90 0 1,0 0,160 l300,-160 a90,90 0 1,1 0,160z');
offset-rotate: auto;
offset-anchor: top left;
animation: run 6s linear infinite;
}
offset-rotate
Mit der Eigenschaft offset-rotate können Sie die Ausrichtung des animierten Objekts beeinflussen.
Folgende Angaben sind möglich:
-
auto
: (Standardwert) das zu animierende Objekte passt sich dem Verlauf des Pfades an -
reverse
-
grad
: Winkelmaß, das Objekt behält diese Einstellung über den ganzen Verlauf des Pfades
svg {
--flugbahn: path('M200,100 a90,90 0 1,0 0,160 l300,-160 a90,90 0 1,1 0,160z');
}
.bahn {
d: var(--flugbahn);
}
#yellow_plane {
offset-path: var(--flugbahn);
offset-rotate: auto;
animation: run 6s linear infinite;
}
#blue_plane {
offset-path: var(--flugbahn);
offset-rotate: 0deg;
animation: run 6s linear reverse infinite;
}
@keyframes run {
from {
offset-distance: 0;
}
to {
offset-distance: 100%;
}
}
offset-rotate: 0deg;
immer seine Ausrichtung.
Da die Flugbahn im Beispiel dreimal benötigt wird (in den offset-path Angaben und zur Darstellung als path Element), wurde sie in einem Custom property bereitgestellt.Quellen
- ↑ groups.google: Intent to Ship: offset-path; Deprecate and Remove: motion-path
Weblinks
- W3C: Motion Path Module Level 1 Editor’s Draft, 6 September 2016
- MDN: motion-path
deutsch:
- mediaevent: Motion Path: Animation entlang eines Pfades
englisch:
- Daniel Wilson: Web Animations API Tutorial Part 5: The Loveable Motion Path
Anwendungsbeispiele (teilweise alte Syntax)
- github: CSS Motion Path Sample
- codepen: Future Use: CSS Motion Paths Dan Wilson
- Tobias Sahlin: Moving along a curved path in CSS with layered animation vom 12.01.2016
Beiden wird mit CSS mit der offset-path-Eigenschaft ein Pfad zugewiesen. In einer Animation
Der zu durchlaufende Pfad ist nur zu Orientierungszwecken mit einer blauen Linie dargestellt; für die Animation selbst ist er nicht nötig.run
wird die offset-distance-Eigenschaft von 0 auf 100% verändert, sodass der ganze Pfad durchlaufen wird. Da die Animation für animation-iteration-count den Wertinfinite
erhält, wird sie immer wieder ausgeführt. die rote SVG-Kugel erhält innerhalb der Klassereverse
noch durchanimation-direction:reverse
eine andere Richtung.