CSS @starting-style κανόνας

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

CSS @starting-style Οι κανόνες χρησιμοποιούνται για τη διαμόρφωση του αρχικού στυλ του στοιχείου πριν από την πρώτη του ανανέωση του στυλ.

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

Παράδειγμα

Παράδειγμα 1

Χρήση @starting-styleΓια να ξεκινήσει η κουτί με διαφάνεια 0 και να κατέβει από την κορυφή:

.box {
  πλάτος: 150px;
  ύψος: 150px;
  χρώμα υποβάθρου: ροζ;
  διαφάνεια: 1;
  μεταβλητή: όλα 0.9s ευκολία;
  @starting-style {
    διαφάνεια: 0;
    μετακίνηση: 0 -80px;
  }
}

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Χρήση σε αναδυόμενες φωτογραφίες και διαλόγους @starting-style:

#myPopover {
  μεταβλητή: διαφάνεια 0.5s ευκολία-εισόδου, διαστάσεις 0.5s ευκολία-εισόδου;
  @starting-style {
    διαφάνεια: 0;
    διαστάσεις: 1.1;
  }
}
#myDialog {
  μεταβλητή: διαφάνεια 0.5s ευκολία-εισόδου, διαστάσεις 0.5s ευκολία-εισόδου;
  @starting-style {
    διαφάνεια: 0;
    διαστάσεις: 1.1;
  }
}

Δοκιμάστε το προσωπικά

Γλωσσάρα CSS

@starting-style {
  καταχώρηση CSS;
}

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

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