Συνάρτηση cubic-bezier() του CSS

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

Το CSS cubic-bezier() Η συνάρτηση χρησιμοποιείται για να ορίσει την τριγωνική καμπύλη.

Η τριγωνική καμπύλη ορίζεται από τέσσερις σημεία P0, P1, P2 και P3. Στο CSS, τα P0 και P3 είναι ο αρχέτυπος και ο τελικός πόλος της καμπύλης, και οι συντεταγμένες αυτών των σημείων είναι σταθερές ποσοστώσεις. Το P0 είναι (0, 0), που αντιπροσωπεύει το αρχικό χρόνο και την αρχική κατάσταση; Το P3 είναι (1, 1), που αντιπροσωπεύει τον τελικό χρόνο και την τελική κατάσταση.

cubic-bezier() Η συνάρτηση μπορεί να χρησιμοποιηθεί με animation-timing-function Χαρακτηριστικά και transition-timing-function Χρησιμοποιούνται ταυτόχρονα.

Παράδειγμα

Παράδειγμα 1

Εναλλαγή ταχύτητας από την αρχή μέχρι το τέλος του过渡:

div {
  πλάτος: 100px;
  ύψος: 100px;
  χρώμα φόντου: κόκκινο;
  transition: πλάτος 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Προσπαθήστε να το δοκιμάσετε

Παράδειγμα 2

Παρουσίαση των στοιχείων <div> με διαφορετικές τιμές ταχύτητας τριγωνικής καμπύλης:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Προσπαθήστε να το δοκιμάσετε

Γλωσσή CSS

cubic-bezier(x1,y1,x2,y2)

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

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

Τα αριθμήματα στην τаблицή δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

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

Αναφορά:Αξία Animation-Timing-Function CSS

Αναφορά:CSS transition-timing-function ιδιότητα