CSS Keyframe Animation Generator

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

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

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

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