Η συνάρτηση CSS steps()

Ορισμός και χρήση

Η CSS steps() Η συνάρτηση χρησιμοποιείται για τη δημιουργία λειτουργιών χρονικού βηματισμού για την κινητικότητα.

Η συνάρτηση αυτή διαιρεί τη διάρκεια της κινητικότητας σε ίσες χρονικές περιόδους που ορίζονται από τον αριθμό (n). Για παράδειγμα: Αν ο n είναι 4, η κινητικότητα θα διαιρεθεί σε 4 μέρη. Θα διαιρέσει τη διάρκεια από 0% έως 100% σε 4 μέρη: 0%-25%, 25%-50%, 50%-75% και 75%-100%

Παράδειγμα

Δημιουργία διαφορετικών λειτουργιών χρονικού βηματισμού για την κινητικότητα:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Προσπαθήστε το προσωπικά

Γλώσσα CSS

steps(n, step-position)
Τιμή Περιγραφή
n Απαιτείται. Ορίζει τον αριθμό των βημάτων/διαστημάτων.
step-position

Προαιρετικό. Ορίζει τον χρόνο που συμβαίνει η απότομη κίνηση μεταξύ των τιμών. Χρησιμοποιήστε ένα από τα παρακάτω κλειδιά:

  • jump-start ή start: Η πρώτη κίνηση συμβαίνει στην αρχή της ανίχνευσης
  • jump-end ή end: Η τελευταία κίνηση συμβαίνει στο τέλος της ανίχνευσης. Το end είναι η προεπιλεγμένη τιμή
  • jump-none: Δεν υπάρχει πρόωρη ή καθυστερημένη απότομη κίνηση
  • jump-both: Συγχρονική πρόωρη και καθυστερημένη απότομη κίνηση

Τεχνικά λεπτομέρειες

Έκδοση: CSS Easing Functions Level 1

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

Τα αριθμήματα στην τάβλη αναφέρονται στην έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη λειτουργία.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Σχετικές σελίδες

Αναφορά:Αξία animation CSS

Αναφορά:Αξία animation-timing-function CSS