Παύση & Loop CSS Animations με ΑΝΑΜΟΝΗ! Εμψυχος
Υπάρχουν πολλά που μπορείτε να κάνετε με καθαρό animation CSS, αλλά η παύση & η επαναφορά ενός animation δεν είναι δυνατή με την τρέχουσα προδιαγραφή W3.
Αλλά με ένα δωρεάν εργαλείο όπως ΠΕΡΙΜΕΝΕΤΕ! Εμψυχος μπορείτε πραγματικά δημιουργήστε βιντεοκάμερες από το μηδέν με προσαρμοσμένες καθυστερήσεις μεταξύ κάθε βρόχου. Αυτό μπορεί να μοιάζει με ένα καθημερινό έργο, αλλά λύνει ένα σημείο πόνου για πολλούς προγραμματιστές.
Πρέπει να σημειωθεί ότι υπάρχει μια ιδιότητα CSS που ονομάζεται κίνηση-καθυστέρηση οι οποίες καθυστερεί την αρχή ενός animation CSS. Ωστόσο, αυτό δεν επηρεάζει μια επαναλαμβανόμενη κινούμενη εικόνα καθώς καθυστερεί μόνο το σημείο εκκίνησης.
ΠΕΡΙΜΕΝΕΤΕ! Εμψυχος αυτόματα υπολογίζει πόσες παύσεις πρέπει να τοποθετηθούν μέσα σε προσαρμοσμένα βασικά πλαίσια κινούμενων σχεδίων δημιουργήστε την ακριβή διάρκεια παύσης χρειάζεστε μεταξύ βρόχων. Αυτό θα μπορούσε να γίνει με το χέρι, αλλά είναι εξαιρετικά convolved, για να μην αναφέρουμε υπερβολικά ενοχλητικό.
Αυτή η εφαρμογή ιστού μπορεί να λειτουργούν με οποιαδήποτε λειτουργία κινούμενης εικόνας CSS3, συμπεριλαμβανομένων περιστροφών και μετασχηματισμών. Δεν γράφετε νέες ιδιότητες CSS, αλλά μάλλον που βασίζεται στο χαρακτηριστικό των βασικών καρέ για να δημιουργήσω παύσεις βάσει ποσοστών (από 0% έως 100%) μέσα στο κινούμενο σχέδιο.
Ελέγξτε την αρχική σελίδα για να δείτε μερικά παραδείγματα στη δράση. Είναι αρκετά σαφές τι μπορείτε να κάνετε και ο πηγαίος κώδικας είναι εκεί για να αντιγράψετε / επικολλήσετε το δικό σας έργο.
Σημειώστε ότι αυτό είναι όχι μια πλήρης βιβλιοθήκη. Είναι μια γεννήτρια που δημιουργεί τον κωδικό σας CSS on-the-fly με βάση ό, τι χρειάζεστε για την καθυστέρηση της κινούμενης εικόνας.
Εάν θέλετε μια απλούστερη λύση εκτός του χώρου τότε μπορείτε κατεβάστε το Sass mixin. Αυτό είναι λίγο πιο δύσκολο γιατί απαιτεί ένα χάρτη Sass, έτσι θα πρέπει να καταλάβετε πώς να προσθέσετε προσαρμοσμένες ιδιότητες και να γράψετε σωστά τη σύνταξή σας.
Ακολουθεί ένα παράδειγμα για το πώς ήσαστε καλέστε το μίγμα:
(μετασχηματισμός: κλίμακα (1), χρώμα φόντου: μπλε), 50: (μετασχηματισμός: κλίμακα (2), χρώμα φόντου: πράσινο), 100: : κλίμακα (3), χρώμα φόντου: κόκκινο)), διάρκεια: 2, waitTime: 1, timingFunction: ευκολία, iterationCount: άπειρη));
Οι pro web developers δεν πρέπει να έχουν κανένα πρόβλημα να μάθουν τα σχοινιά και να το κατασκευάσουν σε ένα επαναχρησιμοποιήσιμο mixin. Αλλά οι αρχάριοι προγραμματιστές μπορεί να αγωνιστούν για να το λειτουργήσουν, εξ ου και η εφαρμογή web.
Ολα αυτά πηγαίου κώδικα είναι διαθέσιμο δωρεάν στο GitHub αν θέλετε να κάνετε λήψη ενός αντιγράφου τοπικά. Αλλά δεδομένου ότι αυτό είναι ένα τόσο περίεργο χαρακτηριστικό, δεν είναι κάτι που ίσως χρειαστείτε σε πολλά έργα. Γι 'αυτό το λόγο ΠΕΡΙΕΧΟΜΕΝΑ! Το Animate app web θα πρέπει να είναι αρκετό για να σας βοηθήσει λύσει ένα εφάπαξ πρόβλημα του καθυστέρηση των κινούμενων εικόνων με καθαρό CSS.
Είναι ένα πραγματικά διασκεδαστικό hack που είναι επίσης αρκετά σκοτεινό από τη σχεδίαση. Αλλά πηγαίνει να δείξει πόσο δυνατό είναι με το CSS3 και λίγη εφευρετικότητα.
