Μεταβάσεις CSS

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Μεταβάσεις CSS

Οι μεταβάσεις CSS σάς επιτρέπουν να αλλάζετε τις τιμές των ιδιοτήτων ομαλά, σε μια δεδομένη διάρκεια.

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

CSS

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

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

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

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

Property
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.

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

Παράδειγμα

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

Το εφέ μετάβασης θα ξεκινήσει όταν η καθορισμένη ιδιότητα CSS (πλάτος) αλλάξει τιμή.

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

Παράδειγμα

div:hover
{
  width: 300px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

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

Αλλαγή πολλών αξιών ιδιοκτησίας

Το ακόλουθο παράδειγμα προσθέτει ένα εφέ μετάβασης και για την ιδιότητα πλάτους και ύψους, με διάρκεια 2 δευτερόλεπτα για το πλάτος και 4 δευτερόλεπτα για το ύψος:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Καθορίστε την καμπύλη ταχύτητας της μετάβασης

Η ιδιότητα transition-timing-function καθορίζει την καμπύλη ταχύτητας του εφέ μετάβασης.

Η ιδιότητα transition-timing-function μπορεί να έχει τις ακόλουθες τιμές:

ease: - καθορίζει ένα εφέ μετάβασης με αργή έναρξη, μετά γρήγορη και μετά αργή λήξη (αυτό είναι προεπιλεγμένο)
linear: - καθορίζει ένα εφέ μετάβασης με την ίδια ταχύτητα από την αρχή μέχρι το τέλος
ease-in: - καθορίζει ένα εφέ μετάβασης με αργή εκκίνηση
ease-out: - καθορίζει ένα εφέ μετάβασης με αργό τέλος
ease-in-out: - καθορίζει ένα εφέ μετάβασης με αργή έναρξη και λήξη
cubic-bezier(n,n,n,n): - σας επιτρέπει να ορίσετε τις δικές σας τιμές σε μια συνάρτηση κυβικού bezier

Το ακόλουθο παράδειγμα δείχνει μερικές από τις διαφορετικές καμπύλες ταχύτητας που μπορούν να χρησιμοποιηθούν:

Παράδειγμα

#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;}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#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;}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

Καθυστέρηση του εφέ μετάβασης

Η ιδιότητα καθυστέρηση μετάβασης καθορίζει μια καθυστέρηση (σε δευτερόλεπτα) για το εφέ μετάβασης.

Το ακόλουθο παράδειγμα έχει καθυστέρηση 1 δευτερολέπτου πριν από την έναρξη:

Παράδειγμα

div {
  
transition-delay: 1s;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Μετάβαση + Μεταμόρφωση

Το ακόλουθο παράδειγμα προσθέτει ένα εφέ μετάβασης στον μετασχηματισμό:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

Περισσότερα παραδείγματα μετάβασης

Οι ιδιότητες μετάβασης CSS μπορούν να καθοριστούν μία προς μία, ως εξής:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

ή χρησιμοποιώντας την ιδιότητα συντομογραφίας μετάβαση:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Ιδιότητες μετάβασης CSS

Ο παρακάτω πίνακας παραθέτει όλες τις ιδιότητες μετάβασης CSS:

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