Ποια είναι η λειτουργία των keyframes και πώς λειτουργούν;

@keyframes — κανόνας CSS που ορίζει τα βασικά καρέ μιας κινούμενης εικόνας. Επιτρέπει τη δημιουργία μιας ακολουθίας καταστάσεων ενός στοιχείου σε διαφορετικές στιγμές χρόνου, τις οποίες ο περιηγητής θα διανέμει ομαλά, δημιουργώντας ένα εφέ κίνησης. Λειτουργεί ορίζοντας ένα σύνολο στυλ για το στοιχείο σε συγκεκριμένα ποσοστά χρόνου (από 0% έως 100%) ή χρησιμοποιώντας τις λέξεις-κλειδιά from (0%) και to (100%).

Για να χρησιμοποιήσετε keyframes:

1. Ορίστε τον κανόνα @keyframes με ένα μοναδικό όνομα.
2. Μέσα στο @keyframes, καθορίστε στυλ για διάφορα σημεία χρόνου (σε ποσοστά ή from/to).
3. Εφαρμόστε την δημιουργημένη κινούμενη εικόνα στο στοιχείο χρησιμοποιώντας την ιδιότητα CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Αρχική κατάσταση: χωρίς μετατόπιση στο X
  }

  to {
    transform: translateX(100%); // Τελική κατάσταση: μετατόπιση κατά 100% στο X
  }
}

.element {
  animation-name: slidein; // Όνομα της κινούμενης εικόνας που ορίζεται παραπάνω
  animation-duration: 3s; // Διάρκεια της κινούμενης εικόνας
  animation-timing-function: ease-in-out; // Συνάρτηση ταχύτητας της κινούμενης εικόνας
  animation-delay: 1s; // Καθυστέρηση πριν την έναρξη της κινούμενης εικόνας
  animation-iteration-count: infinite; // Αριθμός επαναλήψεων (εδώ ατελείωτο)
  animation-direction: alternate; // Κατεύθυνση της κινούμενης εικόνας (ευθεία, μετά ανάποδα)
}

Βασικές ιδιότητες animation, που χρησιμοποιούνται μαζί με @keyframes:

Ιδιότητα	Περιγραφή
animation-name	Όνομα του @keyframes που πρέπει να εφαρμοστεί.
animation-duration	Διάρκεια ενός κύκλου κινούμενης εικόνας (π.χ., 2s, 500ms).
animation-timing-function	Συνάρτηση ταχύτητας της κινούμενης εικόνας (π.χ., linear, ease, ease-in, cubic-bezier).
animation-delay	Καθυστέρηση πριν την έναρξη της κινούμενης εικόνας (π.χ., 1s).
animation-iteration-count	Αριθμός επαναλήψεων της κινούμενης εικόνας (infinite για ατελείωτη επανάληψη).
animation-direction	Κατεύθυνση της κινούμενης εικόνας (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Ορίζει ποιες στυλ εφαρμόζονται στο στοιχείο πριν και μετά την κινούμενη εικόνα.
animation-play-state	Ορίζει αν η κινούμενη εικόνα τρέχει ή παύει.