CSS Μεταβατικές

CSS Μεταβατικές

Η μετάβαση CSS επιτρέπει την ομαλή αλλαγή της τιμής της ιδιότητας μέσα σε μια καθορισμένη διάρκεια.

Κινήστε τον δείκτη του ποντικιού σε αυτό το στοιχείο για να δείτε την επίδραση της μετάβασης CSS:

CSS

Σε αυτό το κεφάλαιο, θα μάθετε τις εξής ιδιότητες:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

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

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

attributes Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Πώς να χρησιμοποιήσετε την μετάβαση CSS;

Για να δημιουργήσετε μια μετάβαση, πρέπει να καθορίσετε δύο πράγματα σαφώς:

  • Η ιδιότητα CSS που θέλετε να προσθέσετε την επίδραση
  • Διάρκεια της επίδρασης

Σημείωση:Αν δεν καθοριστεί η διάρκεια, η μετάβαση δεν θα έχει αποτέλεσμα, επειδή η προεπιλεγμένη τιμή είναι 0.

Το παρακάτω παράδειγμα δείχνει ένα κόκκινο στοιχείο <div> μεγέθους 100px * 100px. Το στοιχείο <div> έχει επίσης καθοριστεί για την ιδιότητα transition, με διάρκεια 2 δευτερόλεπτα:

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Όταν η τιμή της καθορισμένης ιδιότητας CSS (width) αλλάζει, ξεκινά η διαδικασία μετάβασης.

Τώρα, ας καθορίσουμε μια νέα τιμή για την ιδιότητα width όταν ο ποντίκος αναπαράγεται στο στοιχείο <div>:

Example

div:hover {
  width: 300px;
}

Try it yourself

Παρακαλώ σημειώστε ότι όταν ο δείκτης του ποντικιού απομακρυνθεί από το στοιχείο, θα επανέλθει στα αρχικά του στυλ.

Change the values of several attributes

The following example adds transition effects to both the width and height properties, width is 2 seconds, and height is 4 seconds:

Example

div {
  transition: width 2s, height 4s;
}

Try it yourself

Specify the speed curve of the transition

transition-timing-function The attribute specifies the speed curve of the transition effect.

The transition-timing-function attribute accepts the following values:

  • ease - Specifies a transition effect that starts slowly, then accelerates, and then ends slowly (default)
  • linear - Specifies a transition effect with the same speed from start to end
  • ease-in - Specifies a transition effect that starts slowly
  • ease-out - Specifies a transition effect that ends slowly
  • ease-in-out - Specifies a transition effect that starts and ends slower
  • cubic-bezier(n,n,n,n) - Allows you to define your own values in the cubic Bezier function

The following examples show some different speed curves that can be used:

Example

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Try it yourself

Delay transition effect

transition-delay The attribute specifies the delay of the transition effect (in seconds).

The following example has a 1-second delay before starting:

Example

div {
  transition-delay: 1s;
}

Try it yourself

Transition + Transformation

The following example adds a transition effect to the transformation:

Example

div {
  transition: width 2s, height 2s, transform 2s;
}

Try it yourself

More transition examples

You can specify CSS transition attributes one by one as follows:

Example

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Try it yourself

Or use the shorthand transition Attribute:

Example

div {
  transition: width 2s linear 1s;
}

Try it yourself

CSS transition attributes

The following table lists all CSS transition attributes:

attributes description
transition Σύντομη ιδιότητα που χρησιμοποιείται για να θέσει τις τέσσερις ιδιότητες μετάβασης σε μια μοναδική ιδιότητα.
transition-delay Ορίζει την καθυστέρηση της μετάβασης (με δεκαδικά δευτερόλεπτα).
transition-duration Ορίζει πόσο χρόνο ή χιλιοστόδευτερόλεπτα θα διαρκέσει η μετάβαση.
transition-property Ορίζει το όνομα του χαρακτηριστικού CSS που αφορά η μετάβαση.
transition-timing-function Ορίζει την ταχύτητα της καμπύλης της μετάβασης.