Γεννήτρια CSS Keyframe Animation

Ένας κανόνας CSS @keyframes είναι στην ουσία ένα μικρό χρονοδιάγραμμα: ένα σύνολο ποσοστιαίων σημείων ελέγχου, καθένα από τα οποία δηλώνει πώς πρέπει να φαίνεται μια ιδιότητα εκείνη τη συγκεκριμένη στιγμή, με τον browser να παρεμβάλλει όλες τις ενδιάμεσες τιμές. Η χειροκίνητη δημιουργία ενός τέτοιου κανόνα σημαίνει ότι πρέπει να κρατάτε πολλά από αυτά τα ποσοστιαία σημεία ελέγχου στο μυαλό σας ταυτόχρονα για πολλές ιδιότητες — αυτή η γεννήτρια μετατρέπει αυτό το χρονοδιάγραμμα σε κάτι που μπορείτε πραγματικά να δείτε και να σύρετε: μία οριζόντια λωρίδα ανά ιδιότητα, με έναν δείκτη στάσης σε κάθε σημείο ελέγχου.

Το κεντρικό στοιχείο είναι η κεφαλή αναπαραγωγής με δυνατότητα σύρσης. Σύρετέ την σε οποιοδήποτε σημείο μεταξύ 0% και 100% και το πλαίσιο προεπισκόπησης μεταβαίνει στην ακριβή συνδυασμένη κατάσταση εκείνη τη στιγμή — όχι στο πλησιέστερο keyframe, αλλά σε μια πραγματική γραμμικά παρεμβαλλόμενη τιμή που υπολογίζεται μεταξύ των δύο σημείων στάσης που περιβάλλουν την κεφαλή σε κάθε ενεργό κανάλι. Οι αριθμητικές ιδιότητες όπως η θέση, η περιστροφή και η κλίμακα παρεμβάλλονται ως απλοί αριθμοί· το background-color παρεμβάλλει ανεξάρτητα τα κανάλια κόκκινου, πράσινου και μπλε, πράγμα που κάνει ένα κανάλι χρώματος να μεταβαίνει ομαλά μέσα από ενδιάμεσες αποχρώσεις αντί να πηδά ανάμεσα στα χρώματα που ορίσατε εσείς.

Πολλά κανάλια συνδυάζονται αυτόματα σε μία συνεκτική κίνηση: κάθε ιδιότητα που βασίζεται σε transform (μετακίνηση, περιστροφή, κλίμακα) συγχωνεύεται σε μία ενιαία δήλωση transform σε κάθε ποσοστό keyframe, ενώ το opacity και το background-color παραμένουν στις δικές τους γραμμές, ακριβώς όπως θα έμοιαζε ένα πραγματικό χειρόγραφο CSS. Τα ποσοστά όπου ένα συγκεκριμένο κανάλι δεν έχει ρητό σημείο στάσης απλώς παραλείπονται από τις δηλώσεις αυτής της ιδιότητας επίτηδες — η ίδια η παρεμβολή keyframe του browser γεμίζει το κενό μεταξύ των σημείων στάσης που υπάρχουν, με τον ίδιο τρόπο που θα έκανε για κάθε κανόνα @keyframes που γράψατε με το χέρι.

Πέντε presets — αναπήδηση, ταλάντευση, παλμός, fade και εμφάνιση με ολίσθηση — φορτώνουν ένα πλήρες, έτοιμο προς τροποποίηση χρονοδιάγραμμα (συμπεριλαμβανομένης μιας λογικής διάρκειας, συνάρτησης χρονισμού και αριθμού επαναλήψεων) με ένα κλικ. Πατήστε Play οποιαδήποτε στιγμή για να δείτε την πραγματική κίνηση CSS να εκτελείται στο στοιχείο προεπισκόπησης, δημιουργημένη δυναμικά μέσω ενός stylesheet που εισάγεται εκείνη τη στιγμή, και στη συνέχεια αντιγράψτε ολόκληρο το @keyframes block μαζί με το .animated-element { animation: ... } shorthand κατευθείαν στο δικό σας project. Όπως κάθε εργαλείο σε αυτόν τον ιστότοπο, όλα τρέχουν τοπικά στον browser χωρίς τίποτα να μεταφορτώνεται ποτέ.