Απόσταση απόστασης - CSS-Κόλπα

Αυτή η ιδιοκτησία ξεκίνησε τη ζωή ως motion-offset. Αυτό, και όλες οι άλλες σχετικές ιδιότητες κίνησης *, μετονομάζονται σε όφσετ- * στις προδιαγραφές. Αλλάζουμε τα ονόματα εδώ στο αλμανάκ. Αν θέλετε να το χρησιμοποιήσετε τώρα, ίσως είναι καλύτερο να χρησιμοποιήσετε και τις δύο σύνταξη.

Το motion-offsetακίνητο στο CSS λέει: πόσο μακριά motion-pathείστε; Αυτή είναι η κινούμενη ιδιότητα που σχετίζεται με διαδρομές κίνησης.

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); motion-offset: 0%; /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Στο παραπάνω παράδειγμα, έχουμε ορίσει την αρχική motion-offsetτιμή 0%, αν και αξίζει να σημειωθεί ότι το μηδέν είναι η προεπιλεγμένη τιμή, ακόμη και όταν δεν ορίζεται ρητά (θα μπορούσαμε να το αφήσουμε αυτό εκτός)

Μεταβλητές

Η offset-distanceιδιότητα δέχεται τις ακόλουθες τιμές:

length
percentage

Και στις δύο περιπτώσεις, η τιμή καθορίζει το μήκος της απόστασης από το σημείο εκκίνησης της διαδρομής (η προεπιλογή είναι 0pxή 0%) έως το τελικό σημείο της διαδρομής.

Παράδειγμα

Σε αυτό το παράδειγμα, έχουμε δύο κύκλους όπου ένας μικρός κύκλος κινείται κατά μήκος της διαδρομής ενός μεγαλύτερου κύκλου.

Εδώ είναι το αρχείο SVG που χρησιμοποιούμε για να σχεδιάσουμε τα σχήματα:

Τώρα, μπορούμε να ορίσουμε την .markerτάξη στο CSS μας ώστε να ακολουθεί τις .trackσυντεταγμένες τάξης:

/* The motion-offset is zero by default */ .marker ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Δείτε το απλό παράδειγμα του Animation Along a Path του Geoff Graham (@geoffgraham) στο CodePen.

Ομοίως, μπορούμε να σταματήσουμε την offset-distanceτιμή στο 50% και το κινούμενο σχέδιο θα πέσει στα μισά της διαδρομής:

Δείτε το απλό παράδειγμα του Animation Along a Path του Geoff Graham (@geoffgraham) στο CodePen.

Ή, για να ελέγξουμε την ταχύτητα της κινούμενης εικόνας, θα μπορούσαμε να πολλαπλασιάσουμε την offset-distanceτιμή σε 300% για να επιταχύνουμε τα πράγματα. Ωστόσο, εάν έχουμε καθορίσει το χρονικό διάστημα που εκτελείται η κινούμενη εικόνα σε τιμή μεγαλύτερη από αυτήν που χρειάζεται το στοιχείο για να ταξιδέψει η διαδρομή, τότε η κίνηση θα σταματήσει έως ότου η κινούμενη εικόνα ολοκληρώσει το διάστημά της πριν την επανάληψη:

Δείτε το απλό παράδειγμα του Animation Along a Path του Geoff Graham (@geoffgraham) στο CodePen.

Υποστήριξη προγράμματος περιήγησης

η offset-distanceιδιότητα εξακολουθεί να θεωρείται πειραματικό χαρακτηριστικό κατά τη στιγμή αυτής της γραφής και δεν υπάρχει τεκμηρίωση σχετικά με την υποστήριξη του προγράμματος περιήγησης. Ωστόσο, υπάρχει τεκμηρίωση σχετικά με την motion-pathυποστήριξη και μπορούμε να το χρησιμοποιήσουμε ως βάση για την ώρα.

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.