CSS Animations

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

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

CSS Animations

Το CSS επιτρέπει την κίνηση των στοιχείων HTML χωρίς τη χρήση JavaScript ή Flash!

CSS

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

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Υποστήριξη προγράμματος περιήγησης για κινούμενα σχέδια

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

Property
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Τι είναι τα κινούμενα σχέδια CSS;

Μια κινούμενη εικόνα επιτρέπει σε ένα στοιχείο να αλλάζει σταδιακά από το ένα στυλ στο άλλο.

Μπορείτε να αλλάξετε όσες ιδιότητες CSS θέλετε, όσες φορές θέλετε.

Για να χρησιμοποιήσετε την κινούμενη εικόνα CSS, πρέπει πρώτα να καθορίσετε ορισμένα βασικά καρέ για το κινουμένων σχεδίων.

Τα βασικά καρέ περιέχουν τα στυλ που θα έχει το στοιχείο σε συγκεκριμένες στιγμές.

Ο κανόνας @keyframes

Όταν καθορίζετε στυλ CSS μέσα στο @keyframes κανόνα, το κινούμενο σχέδιο θα αλλάξει σταδιακά από το τρέχον στυλ στο νέο σε ορισμένους χρόνους.

Για να λειτουργήσει ένα κινούμενο σχέδιο, πρέπει να συνδέσετε το κινούμενο σχέδιο σε ένα στοιχείο.

Το παρακάτω παράδειγμα συνδέει την κινούμενη εικόνα "παράδειγμα" στο στοιχείο <div>. Το animation θα διαρκέσει για 4 δευτερόλεπτα και θα αλλάξει σταδιακά χρώμα φόντου του στοιχείου <div> από "κόκκινο" σε "κίτρινο":

Παράδειγμα

/* The animation code */
@keyframes example {
  from {background-color: red;}
   
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  
background-color: red;	animation-name: example;
  animation-duration: 4s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Σημείωση: Η ιδιότητα animation-duration ορίζει πόσο χρόνο χρειάζεται για να ολοκληρωθεί μια κινούμενη εικόνα. Εάν η ιδιότητα animation-duration δεν έχει καθοριστεί, δεν θα εμφανιστεί κινούμενη εικόνα, γιατί η προεπιλεγμένη τιμή είναι 0s (0 δευτερόλεπτα).

Στο παραπάνω παράδειγμα έχουμε καθορίσει πότε θα αλλάξει το στυλ χρησιμοποιώντας τις λέξεις-κλειδιά "από" και "προς" (που αντιπροσωπεύει το 0% (έναρξη) και το 100% (ολοκληρώθηκε)).

Είναι επίσης δυνατή η χρήση ποσοστού. Χρησιμοποιώντας το ποσοστό, μπορείτε να προσθέσετε τόσα το στυλ αλλάζει όπως θέλετε.

Το παρακάτω παράδειγμα θα αλλάξει το χρώμα φόντου του <div> στοιχείο όταν η κινούμενη εικόνα είναι 25% ολοκληρωμένη, 50% ολοκληρωμένη και ξανά όταν η κινούμενη εικόνα έχει ολοκληρωθεί 100%:

Παράδειγμα

/* The animation code */
@keyframes example
{
  0%   {background-color: red;}
   
25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Το παρακάτω παράδειγμα θα αλλάξει τόσο το χρώμα φόντου όσο και τη θέση του <div> στοιχείο όταν η κινούμενη εικόνα είναι 25% ολοκληρωμένη, 50% ολοκληρωμένη και ξανά όταν η κινούμενη εικόνα έχει ολοκληρωθεί 100%:

Παράδειγμα

/* The animation code */
@keyframes example
{
  0%   {background-color:red; left:0px; top:0px;}
   
25%  {background-color:yellow; left:200px; top:0px;}
   
50%  {background-color:blue; left:200px; top:200px;}
   
75%  {background-color:green; left:0px; top:200px;}
   
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Καθυστέρηση κινούμενης εικόνας

Η ιδιότητα animation-delay καθορίζει μια καθυστέρηση για την έναρξη μιας κινούμενης εικόνας.

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

Παράδειγμα

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
    
animation-duration: 4s;
  animation-delay: 2s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>

Επιτρέπονται επίσης αρνητικές τιμές. Εάν χρησιμοποιείτε αρνητικές τιμές, η κινούμενη εικόνα θα ξεκινήσει σαν να έπαιζε ήδη για N δευτερόλεπτα.

Στο παρακάτω παράδειγμα, η κινούμενη εικόνα θα ξεκινήσει σαν να ήταν ήδη παίζοντας για 2 δευτερόλεπτα:

Παράδειγμα

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-delay: -2s;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>

Ορίστε πόσες φορές πρέπει να εκτελείται ένα κινούμενο σχέδιο

Η ιδιότητα animation-iteration-count καθορίζει πόσες φορές πρέπει να εκτελείται μια κινούμενη εικόνα.

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

Παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>

Το παρακάτω παράδειγμα χρησιμοποιεί την τιμή "άπειρο" για να δημιουργήσει την κινούμενη εικόνα συνεχίστε για πάντα:

Παράδειγμα

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
    animation-iteration-count: 
infinite;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

Εκτελέστε κινούμενα σχέδια σε αντίστροφη κατεύθυνση ή εναλλακτικούς κύκλους

Η ιδιότητα animation-direction καθορίζει εάν ένα κινούμενο σχέδιο πρέπει να παίζεται προς τα εμπρός, προς τα πίσω ή εναλλάξ κύκλους.

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

normal

- Το κινούμενο σχέδιο παίζεται κανονικά (εμπρός). Αυτό είναι προεπιλογή

reverse

- Το κινούμενο σχέδιο παίζεται σε αντίστροφη κατεύθυνση (προς τα πίσω)

alternate

- Το κινούμενο σχέδιο αναπαράγεται πρώτα προς τα εμπρός και μετά προς τα πίσω

alternate-reverse

- Το κινούμενο σχέδιο αναπαράγεται πρώτα προς τα πίσω και μετά προς τα εμπρός

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

Παράδειγμα

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-direction: 
reverse;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>

Το παρακάτω παράδειγμα χρησιμοποιεί την τιμή "εναλλακτικό" για να δημιουργήσει την κινούμενη εικόνα τρέξτε πρώτα μπροστά και μετά προς τα πίσω:

Παράδειγμα

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>

Το παρακάτω παράδειγμα χρησιμοποιεί την τιμή "εναλλακτικό-αντίστροφο" για να δημιουργήσει την κινούμενη εικόνα τρέξτε πρώτα προς τα πίσω και μετά προς τα εμπρός:

Παράδειγμα

div {
  width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate-reverse;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>

Καθορίστε την καμπύλη ταχύτητας του κινούμενου σχεδίου

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

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

ease

- Καθορίζει μια κινούμενη εικόνα με αργή έναρξη, μετά γρήγορη και μετά αργή λήξη (αυτή είναι η προεπιλογή)

linear

- Καθορίζει ένα κινούμενο σχέδιο με την ίδια ταχύτητα από την αρχή μέχρι το τέλος

ease-in

- Καθορίζει μια κινούμενη εικόνα με αργή έναρξη

ease-out

- Καθορίζει μια κινούμενη εικόνα με αργό τέλος

ease-in-out

- Καθορίζει ένα κινούμενο σχέδιο με αργή αρχή και τέλος

cubic-bezier(n,n,n,n)

- Σας επιτρέπει να ορίσετε τις δικές σας τιμές σε μια συνάρτηση κυβικού-bezier

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

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

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

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

</body>
</html>

Καθορίστε τη λειτουργία πλήρωσης για μια κινούμενη εικόνα

Τα κινούμενα σχέδια CSS δεν επηρεάζουν ένα στοιχείο πριν από την αναπαραγωγή του πρώτου βασικού καρέ ή μετά την αναπαραγωγή του τελευταίου βασικού καρέ. Η ιδιότητα animation-fill-mode μπορεί παρακάμψει αυτή τη συμπεριφορά.

Η ιδιότητα animation-fill-mode καθορίζει ένα στυλ για το στοιχείο προορισμού όταν το κινούμενο σχέδιο δεν παίζει (πριν από αυτό ξεκινά, αφού τελειώσει, ή και τα δύο).

Η ιδιότητα animation-fill-mode μπορεί να έχει τις ακόλουθες τιμές:

none

- Προεπιλεγμένη τιμή. Η κινούμενη εικόνα δεν θα εφαρμόσει κανένα στυλ στο στοιχείο πριν ή μετά την εκτέλεσή του

forwards

- Το στοιχείο θα διατηρήσει τις τιμές στυλ που ορίζονται από το τελευταίο καρέ-κλειδί (εξαρτάται από κίνηση-κατεύθυνση και animation-iteration-count)

backwards

- Το στοιχείο θα λάβει τις τιμές στυλ που ορίζονται από το πρώτο καρέ-κλειδί (εξαρτάται από την κατεύθυνση κινούμενης εικόνας) και θα τις διατηρήσει κατά τη διάρκεια της περιόδου καθυστέρησης κινούμενης εικόνας

both

- Το κινούμενο σχέδιο θα ακολουθεί τους κανόνες τόσο προς τα εμπρός όσο και προς τα πίσω, επεκτείνοντας τις ιδιότητες κινούμενων εικόνων και προς τις δύο κατευθύνσεις

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

Παράδειγμα

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
    animation-fill-mode: forwards;
  }

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

Το παρακάτω παράδειγμα επιτρέπει στο στοιχείο <div> να λάβει τις τιμές στυλ που ορίζονται από το πρώτο βασικό καρέ πριν από την έναρξη της κινούμενης εικόνας (κατά την περίοδο καθυστέρησης της κίνησης):

Παράδειγμα

 div {
  width: 100px;
  height: 100px;
  
  background: red;
  position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: backwards;
  }

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>

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

Παράδειγμα

 div {
  width: 100px;
  height: 100px;
  background: red;
    position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: both;
  }

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

Ιδιότητα συντομογραφίας κινουμένων σχεδίων

Το παρακάτω παράδειγμα χρησιμοποιεί έξι από τις ιδιότητες κινούμενων εικόνων:

Παράδειγμα

div
{	animation-name: example;
   
animation-duration: 5s;
   
animation-timing-function: linear;
   
animation-delay: 2s;
   
animation-iteration-count: infinite;
   
animation-direction: alternate;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>

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

Παράδειγμα

div
{
    animation: example 5s linear 2s infinite alternate;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>

CSS Animation Properties

Ο παρακάτω πίνακας παραθέτει τον κανόνα @keyframes και όλες τις ιδιότητες κινούμενων εικόνων CSS:

@keyframes

Καθορίζει τον κωδικό κίνησης

animation

Μια συντομογραφία για τη ρύθμιση όλων των ιδιοτήτων κινούμενων εικόνων

animation-delay

Καθορίζει μια καθυστέρηση για την έναρξη μιας κινούμενης εικόνας

animation-direction

Καθορίζει εάν μια κινούμενη εικόνα θα πρέπει να παίζεται προς τα εμπρός, προς τα πίσω ή σε εναλλακτικούς κύκλους

animation-duration

Καθορίζει πόσο χρόνο χρειάζεται μια κινούμενη εικόνα για να ολοκληρωθεί ένας κύκλος

animation-fill-mode

Καθορίζει ένα στυλ για το στοιχείο όταν δεν αναπαράγεται η κινούμενη εικόνα (πριν ξεκινήσει, αφού τελειώσει ή και τα δύο)

animation-iteration-count

Καθορίζει πόσες φορές θα πρέπει να παίζεται μια κινούμενη εικόνα

animation-name

Καθορίζει το όνομα της κινούμενης εικόνας @keyframes

animation-play-state

Καθορίζει εάν η κινούμενη εικόνα εκτελείται ή είναι σε παύση

animation-timing-function

Καθορίζει την καμπύλη ταχύτητας της κινούμενης εικόνας