CSS Keyframe Animation Studio
Δημιουργήστε απαλές κινούμενες εικόνες CSS για πλεύση, παλμό, αναπηρία, κούνημα και περιστροφή με έλεγχο διάρκειας και keyframes.
Εκτελείται στο πρόγραμμα περιήγησής σας. Τα αρχεία σας δεν φεύγουν ποτέ από τη συσκευή. Δείτε πώς να το ελέγξετε
…
Πώς γίνεται
- 1Βήμα 1: ανοίξτε το CSS Keyframe Animation Studio και εισαγάγετε τα στοιχεία σας
Πληκτρολογήστε αριθμούς ή κείμενο, προσθέστε το αρχείο σας ή επιλέξτε τις επιλογές που χρειάζεστε. Δεν ανεβαίνει τίποτα: όλα μένουν στο πρόγραμμα περιήγησής σας.
- 2Βήμα 2: τι κάνει το CSS Keyframe Animation Studio
Δημιουργήστε απαλές κινούμενες εικόνες CSS για πλεύση, παλμό, αναπηρία, κούνημα και περιστροφή με έλεγχο διάρκειας και keyframes.
- 3Βήμα 3: διαβάστε το αποτέλεσμα και συγκρίνετε
Το αποτέλεσμα εμφανίζεται αμέσως. Αλλάξτε μία τιμή για να δείτε πώς μεταβάλλεται η απάντηση και κρατήστε τον αριθμό που ταιριάζει στην περίπτωσή σας.
- 4Βήμα 4: αντιγράψτε ή αποθηκεύστε
Αντιγράψτε το αποτέλεσμα ή κατεβάστε το. Για σημαντική απόφαση, επιβεβαιώστε το με την επίσημη πηγή ή έναν σύμβουλο.
Σχετικά με αυτό το εργαλείο
Αναπνεύστε ζωή σε κουμπιά, σήματα ήρωα, εικονίδια ειδοποίησης και δείκτες φόρτωσης. Επιλέξτε από δημοφιλή προεπιλογές κινούμενων σχεδίων UI όπως Gentle Float, Attention Pulse, Playful Bounce, Error Shake και Infinite Spin. Ρυθμίστε τη διάρκεια αναπαραγωγής σε δευτερόλεπτα και αντιγράψτε τον κώδικα CSS keyframe έτοιμο για παραγωγή.
Συμβουλές για το καλύτερο αποτέλεσμα
Πριν ξεκινήσετε, αφιερώστε λίγο χρόνο να διαβάσετε τις επιλογές και δοκιμάστε πρώτα το εργαλείο με ένα μικρό παράδειγμα. Όλα εκτελούνται στο πρόγραμμα περιήγησης στη δική σας συσκευή· τίποτα από όσα πληκτρολογείτε ή προσθέτετε δεν ανεβαίνει και το κλείσιμο της καρτέλας τα σβήνει όλα. Αν κάτι δεν φαίνεται σωστό, φορτώστε ξανά τη σελίδα και δοκιμάστε πάλι ή χρησιμοποιήστε τον σύνδεσμο αναφοράς σε αυτή τη σελίδα για να μας πείτε τι πήγε στραβά. Αν ένα αποτέλεσμα εξακολουθεί να φαίνεται λάθος, αλλάζετε μία τιμή τη φορά για να δείτε ποιο πεδίο επηρεάζει περισσότερο. Προσθέστε τη σελίδα στους σελιδοδείκτες αν θα τη χρησιμοποιήσετε ξανά.
Με μια ματιά
- Κατηγορία: Εικόνες
- Εκτελείται στο πρόγραμμα περιήγησης, χωρίς εγγραφή, χωρίς μεταφόρτωση.
- Τα στοιχεία που εισάγετε μένουν στη συσκευή σας.
- Διαθέσιμο σε πολλές γλώσσες.
- Τελευταία αναθεώρηση περιεχομένου:
Συχνές ερωτήσεις
Είναι αυτές οι CSS κινούμενες εικόνες επιταχυνθεί από το υλικό;
Yes. Animations utilize `transform: translate()` and `transform: scale()`, which run on the GPU via compositor threads without layout thrashing.
Μπορώ να ρυθμίσω την ταχύτητα του κινούμενου;
Yes. The duration slider allows you to speed up or slow down animations from 0.5 seconds to 4.0 seconds in real time.
Πώς ενεργοποιώ την ανάρτηση μόνο με το κουνιστήρα;
In your CSS, attach the `animation:` property inside a `:hover` pseudo-class (e.g., `.button:hover ( animation: pulse 1s infinite; )`).
Χρειάζεται αυτό βιβλιοθήκες JavaScript;
Όχι, οι δημιουργημένες κινούμενες εικόνες είναι 100% καθαρό CSS και δεν απαιτούν JavaScript.