| αρχική τιμή | 0s |
|---|---|
| Εφαρμόζεται σε | όλα τα στοιχεία, ::πριν και ::μετά ψευδοστοιχεία |
| Κληρονόμησε | όχι |
| Μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ | οπτικός |
| Υπολογιζόμενη τιμή | όπως ορίζεται |
| Τύπος κινούμενης εικόνας | διακεκριμένος |
| κανονική τάξη | η μοναδική μη διφορούμενη σειρά που ορίζεται από την επίσημη γραμματική |
Συμβατότητα προγράμματος περιήγησης
Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ανατρέξτε στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.
Ενημερώστε τα δεδομένα συμβατότητας στο GitHub
| Επιφάνεια εργασίας | Κινητό | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Χρώμιο | άκρη | Firefox | Internet Explorer | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Android webview | Chrome για Android | Firefox για Android | Opera για Android | Safari σε iOS | Samsung Internet | |
| animation-καθυστέρηση | Πλήρης υποστήριξη Chrome 43 Πλήρης υποστήριξη 43 Πλήρης υποστήριξη 3 Πρόθεμα Πρόθεμα | Πλήρης υποστήριξη Edge 12 | Πλήρης υποστήριξη Firefox 16 σημειώσεις Πλήρης υποστήριξη 16σημειώσεις σημειώσεις Πριν από τον Firefox 57, ο Firefox δενεπαναβάψτε στοιχεία εκτός της θύρας προβολής που κινούνται στη θύρα προβολής με καθυστέρηση. Αυτό το σφάλμα επηρεάζει μόνο ορισμένες πλατφόρμες, όπως τα Windows. Πλήρης υποστήριξη 49Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -webkit- Πλήρης υποστήριξη 44Πρόθεμα άτομα με ειδικές ανάγκες Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -webkit- Απενεργοποιημένο Από την έκδοση 44: αυτή η δυνατότητα βρίσκεται πίσω από την προτίμηση layout.css.prefixes.webkit (πρέπει να οριστεί σε true). Για να αλλάξετε τις προτιμήσεις στον Firefox, επισκεφτείτε το about:config. Πλήρης υποστήριξη 5Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -moz- | IE Πλήρης υποστήριξη 10 | Opera Πλήρης υποστήριξη 30 Πλήρης υποστήριξη 30 Πλήρης υποστήριξη 15 Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -webkit- Χωρίς υποστήριξη 12.1 - 15 Χωρίς υποστήριξη 12 - 15Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -o- | Πλήρης υποστήριξη Safari 9 Πλήρης υποστήριξη 9 Πλήρης υποστήριξη 4 Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -webkit- | WebView Android Πλήρης υποστήριξη 43 Πλήρης υποστήριξη 43 Πλήρης υποστήριξη ≤37 Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -webkit- | Chrome Android Πλήρης υποστήριξη 43 Πλήρης υποστήριξη 43 Πλήρης υποστήριξη 18 Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -webkit- | Firefox Android Πλήρης υποστήριξη 16 Πλήρης υποστήριξη 16 Πλήρης υποστήριξη 49 | |||
Ένα κινούμενο σχέδιο CSS δεν χρειάζεται να ξεκινά αμέσως μετά την προετοιμασία του. Μπορείτε να ελέγξετε πότε ξεκινά με την ιδιότητα μετάβαση-καθυστέρηση. Για να καθυστερήσετε τη μετάβαση για ένα συγκεκριμένο χρονικό διάστημα, καθορίστε την στην τιμή της ιδιότητας:
Μετάβαση-καθυστέρηση: 1s; /* καθυστέρηση έναρξης της κινούμενης εικόνας κατά ένα δευτερόλεπτο */
Αυτή η ιδιότητα είναι ελάχιστη χρήση κατά την εφαρμογή απλής διαδραστικότητας σε έναν ιστότοπο, αλλά μπορεί να είναι πολύ χρήσιμη εάν χρειάζεται να δημιουργήσετε πιο περίπλοκα εφέ. Κατ' αναλογία με τη μετάβαση-διάρκεια, μπορείτε να γράψετε τον χρόνο καθυστέρησης για κάθε ιδιότητα που καθορίζεται στην ιδιότητα μετάβασης (είναι επίσης σημαντικό να ακολουθήσετε τη σειρά απαρίθμησης):
Ιδιότητα μετάβασης: χρώμα, χρώμα φόντου, διάστιχο. μετάβαση-διάρκεια: 1s, .5s, 2s μετάβαση-καθυστέρηση: 0s, 0s, 2s /* καθυστέρηση της κίνησης μεταξύ των γραμμάτων κατά 2 δευτερόλεπτα */
Μην ξεχνάτε τη συμβατότητα μεταξύ προγραμμάτων περιήγησης - απολύτως όλες τις ιδιότητες της οικογένειας μετάβασηαπαιτούν τη χρήση προθεμάτων προμηθευτή:
webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; μετάβαση-καθυστέρηση: 1s;
Πρακτική χρήση
Στην πράξη, η ιδιότητα μετάβασης-καθυστέρηση χρησιμοποιείται αρκετά συχνά κατά τη δημιουργία αναπτυσσόμενων μενού που επεκτείνονται με το δείκτη του ποντικιού. Σε αυτή την περίπτωση, γράφεται όχι μόνο για την αρχική κατάσταση, αλλά και για την τελική.
Ίσως έχετε παρατηρήσει ότι σε ορισμένους ιστότοπους, τα αναπτυσσόμενα υπομενού εξαφανίζονται πολύ γρήγορα, γεγονός που καθιστά δύσκολη την πρόσβασή τους επιθυμητός σύνδεσμοςκαι κάντε κλικ σε αυτό. Η ιδιότητα transition-delay, που έχει οριστεί σε ένα κανονικό στοιχείο και σε ένα στοιχείο με την ψευδο-κλάση:hover , βοηθά στην αποτροπή αυτής της συμπεριφοράς. Οι τιμές θα διαφέρουν: για μια κανονική κατάσταση, η ιδιότητα μετάβασης-καθυστέρησης πρέπει να οριστεί σε τιμή μεγαλύτερη από το μηδέν και για μια κατάσταση αιώρησης, πρέπει να οριστεί σε 0. Παράδειγμα:
Υπομενού ( αδιαφάνεια: 0; μετάβαση-ιδιότητα: όλα; μετάβαση-διάρκεια: 0,5 δευτ.; μετάβαση-καθυστέρηση: 1 δευτ.; ) .menu:hover .υπομενού ( αδιαφάνεια: 1; μετάβαση-καθυστέρηση: 0 δευτ.; )
Αυτός ο κωδικός θα κάνει το μενού να εμφανιστεί χωρίς καθυστέρηση και η εξαφάνιση θα καθυστερήσει κατά ένα δευτερόλεπτο. Αυτό το κόλπο σίγουρα θα κάνει το μενού πιο φιλικό προς το χρήστη.
Η ιδιότητα animation-delay ορίζει το χρόνο αναμονής πριν από την έναρξη του βρόχου κίνησης. Μια τιμή 0s ή 0ms ξεκινά την κίνηση αμέσως. Μια αρνητική τιμή ενεργοποιεί επίσης την κινούμενη εικόνα χωρίς καθυστέρηση, αλλά μπορεί να αλλάξει την εμφάνιση της έναρξης της κινούμενης εικόνας.
Επιτρέπεται ο καθορισμός πολλαπλών τιμών παραθέτοντας τις διαχωρισμένες με κόμμα.
σύντομες πληροφορίες
Σύνταξη
animation-delay:<время> [,<время>]*
Σημειογραφία
| Περιγραφή | Παράδειγμα | |
|---|---|---|
| <тип> | Καθορίζει τον τύπο της τιμής. | <размер> |
| A&&B | Οι τιμές πρέπει να εξάγονται με την καθορισμένη σειρά. | <размер> && <цвет> |
| A | σι | Υποδεικνύει ότι πρέπει να επιλεγεί μόνο μία από τις προτεινόμενες τιμές (A ή B). | κανονικό | μικρά καπάκια |
| Α || σι | Κάθε τιμή μπορεί να χρησιμοποιηθεί μόνη της ή σε συνδυασμό με άλλες με οποιαδήποτε σειρά. | πλάτος || μετρώ |
| Ομαδικές αξίες. | [ καλλιέργεια || σταυρός] | |
| * | Επαναλάβετε μηδέν ή περισσότερες φορές. | [,<время>]* |
| + | Επαναλάβετε μία ή περισσότερες φορές. | <число>+ |
| ? | Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική. | ένθεση? |
| (Α, Β) | Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές. | <радиус>{1,4} |
| # | Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα. | <время># |
Παράδειγμα
Μοντέλο αντικειμένου
Ενα αντικείμενο.style.animationDelay
Σημείωση
Το Chrome, το Safari και το Android υποστηρίζουν την ιδιότητα -webkit-animation-delay.
Η Opera πριν από την έκδοση 12.10 υποστηρίζει την ιδιότητα -o-animation-delay.
Ο Firefox πριν από την έκδοση 16 υποστηρίζει την ιδιότητα -moz-animation-delay.
Προσδιορισμός
Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.
- Σύσταση (Σύσταση) - η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
- Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτείται η υποστήριξη της κοινότητας ανάπτυξης για την εφαρμογή του προτύπου.
- Προτεινόμενη σύσταση ( Προτεινόμενη σύσταση) - σε αυτό το στάδιο, το έγγραφο υποβάλλεται στη Συμβουλευτική Επιτροπή του W3C για τελική έγκριση.
- Σχέδιο εργασίας - Μια πιο ώριμη έκδοση του σχεδίου μετά από συζήτηση και τροπολογίες για κοινοτική αναθεώρηση.
- προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) είναι μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έχουν γίνει από τους συντάκτες του έργου.
- προσχέδιο ( Προσχέδιο προδιαγραφών) είναι η πρώτη πρόχειρη έκδοση του προτύπου.
Προγράμματα περιήγησης
Προγράμματα περιήγησης
Η ακόλουθη σημείωση χρησιμοποιείται στον πίνακα του προγράμματος περιήγησης.
Καθυστέρηση επανάληψης κινούμενης εικόνας CSS (5)
Εδώ είναι ένα μικρό απόσπασμα που δείχνει το ίδιο πράγμα το 75% του χρόνου, και μετά μπαίνει μέσα. Αυτό το επαναλαμβανόμενο μοτίβο προσομοιώνει καλά τον λανθάνοντα χρόνο:
Διαφάνεια @-webkit-keyframes ( 0% (θέση φόντου: 0 0;) 25% (θέση φόντου: 0 0;) 50% (θέση φόντου: 0 0;) 75% (θέση φόντου: 0 0; ) 100% (background-position: 13em 0;) ) @-moz-keyframes slide ( 0% (background-position: 0 0;) 25% (background-position: 0 0;) 50% (background-position: 0 0;) 75% (θέση φόντου: 0 0;) 100% (θέση φόντου: 13em 0;) ) Διαφάνεια @keyframes ( 0% (θέση φόντου: 0 0;) 25% (θέση φόντου: 0 0 ;) 50% (θέση φόντου: 0 0;) 75% (θέση φόντου: 0 0;) 100% (θέση φόντου: 13em 0;) )
Πρόσφατα ανακάλυψα πώς να χρησιμοποιώ "σωστά" κινούμενα σχέδια CSS (προηγουμένως τα απέρριψα ως ανίκανη να δημιουργήσω περίπλοκες ακολουθίες όπως θα μπορούσατε στο JavaScript). Λοιπόν, τώρα μαθαίνω για αυτούς.
Για αυτό το εφέ, προσπαθώ να έχω το ντεγκραντέ "flare" να καλύπτει το στοιχείο που μοιάζει με την πρόοδο. Παρόμοιο με το αποτέλεσμα στις εγγενείς γραμμές προόδου των Windows Vista/7.
@keyframes barshine ( από (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) στο (background) -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0,25) 105%,rgba(255,255,255,0) 110%);) ) .progbarin; )
Όπως μπορείτε να δείτε, προσπαθώ να έχω μια καθυστέρηση 4 δευτερολέπτων ακολουθούμενη από ένα glitter 1 δευτερολέπτου, επαναλαμβάνοντας.
Ωστόσο, φαίνεται ότι το animation-delay ισχύει μόνο για την πρώτη επανάληψη, μετά την οποία η λάμψη συνεχίζει να ταλαντεύεται.
Την απορία αυτή την «έλυνα» με τον εξής τρόπο:
@keyframes expbarshine ( από (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0% (8%);) background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0,25) -5%,rgba(255,255,255,0) 0%);) έως (background-image:linear-gradient (120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0,25) 105%,rgba(255,255,255,0) 110%);) ) .progbar ( animation: barshine infinite 5s)
από και το 80% είναι ακριβώς το ίδιο, με αποτέλεσμα να υπάρχει «καθυστέρηση» στο 80% της διάρκειας του animation.
Αυτό λειτουργεί, αλλά για το επόμενο animation μου, χρειάζομαι η καθυστέρηση να είναι μεταβλητή (σταθερή σε ένα συγκεκριμένο στοιχείο, αλλά μεταβλητή μεταξύ των στοιχείων που χρησιμοποιούν το animation), ενώ το ίδιο το animation παραμένει στο ίδιο μήκος.
Με τη "λύση" παραπάνω, καταλήγω σε πιο αργό animation όταν το μόνο που θέλω είναι μεγαλύτερη καθυστέρηση.
Είναι δυνατόν να εφαρμοστεί καθυστέρηση κίνησης σε όλες τις επαναλήψεις, όχι μόνο στην πρώτη;
Η minitech έχει δίκιο ότι το animation-delay καθορίζει την καθυστέρηση πριν από την έναρξη της κίνησης και ΔΕΝκαθυστέρηση μεταξύ των επαναλήψεων. Το πρόγραμμα επεξεργασίας σχεδίου προδιαγραφών το περιγράφει καλά και υπήρξε συζήτηση σχετικά με αυτήν τη δυνατότητα που περιγράφετε και η οποία προσφέρει αυτήν τη δυνατότητα καθυστέρησης επανάληψης.
Αν και μπορεί να υπάρχει λύση στο JS, μπορείτε να προσποιήσετε αυτήν την επαναληπτική καθυστέρηση για να αναβοσβήνει η γραμμή προόδου χρησιμοποιώντας μόνο CSS.
Δηλώνοντας τη θέση της θέσης διαίρεσης φακού: απόλυτη και υπερχείλιση: κρυφή υπερχείλιση του γονικού div: κρυφό , ορίζοντας την κατάσταση 100 τοις εκατό του βασικού καρέ να είναι μεγαλύτερη από το πλάτος της γραμμής προόδου και παίζοντας με τη λειτουργία κυβικού bezier χρόνου και τη μετατόπιση Τιμές στα αριστερά, μπορείτε να εξομοιώσετε τη λειτουργία ελαφριάς ευκολίας -in-out ή γραμμικό χρόνο με "καθυστέρηση".
Θα ήταν ενδιαφέρον να γράψω ένα μικρότερο/scss mixin για να υπολογίσω με ακρίβεια την αριστερή μετατόπιση και τη συνάρτηση χρόνου για να το πετύχω αυτό ακριβώς, αλλά δεν έχω χρόνο να παίξω με αυτό αυτή τη στιγμή. Θα ήθελα πολύ να δω κάτι τέτοιο!
Εδώ είναι το demo που έφτιαξα για να το δείξω. (Προσπάθησα να μιμηθώ την ένδειξη Windows Runtime 7 και έπεσε λίγο, αλλά δείχνει για τι πράγμα μιλάω)
/* CSS */ @keyframes πρόοδος ( από ( πλάτος: 0px; ) σε ( πλάτος: 600px; ) ) @keyframes barshine ( 0% ( αριστερά: -100px; ) 100% ( αριστερά: 1000px; ) ) .flare ( animation -όνομα: barshine; animation-διάρκεια: 3s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); animation-interation -count: άπειρο; αριστερά: 0; επάνω: 0; ύψος: 40 px; πλάτος: 100 px; θέση: απόλυτη; φόντο: -moz-radial-gradient(κέντρο, κάλυμμα έλλειψης, rgba(255,255,255,0,69) 0%, rgba( 255,255,255,0) 87%), /* FF3,6+ */ φόντο: -webkit-gradient (ακτινική, κέντρο κέντρο, 0 px, κέντρο κέντρο, 100%, color-stop(0%, rgba(255,255,255,0,69) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ φόντο: -webkit-radial-gradient(κέντρο, κάλυμμα έλλειψης, rgba(255,255,255,0,69) 0%, rgba(255,25 ,0) 87%); /* Chrome10+,Safari5.1+ */ φόντο: -o-radial-gradient(κέντρο, κάλυμμα έλλειψης, rgba(255,255,255,0,69) 0%, rgba(255,255,255,0) 87%); /* Ο περα 12+ */ φόντο: -ms-radial-gradient(κέντρο, κάλυμμα έλλειψης, rgba(255,255,255,0,69) 0%, rgba(255,255,255,0) 87%); /* IE10+ */ φόντο: ακτινική κλίση(έλλειψη στο κέντρο, rgba(255,255,255,0,69) 0%, rgba(255,255,255,0) 87%); /* W3C */ φίλτρο: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* IE6-9 εναλλακτική σε οριζόντια κλίση */ z-index: 10; ) .progress ( animation-name: πρόοδος; animation-διάρκεια: 10s; animation-delay: 1s; animation-timing-function: linear; animation-iting-count: άπειρο; υπερχείλιση: κρυφό; θέση: σχετική; z-index: 1; ύψος: 100%; πλάτος: 100%, περίγραμμα-δεξιά: 1px συμπαγές #0f9116; φόντο: #caf7ce; /* Παλαιά προγράμματα περιήγησης */ φόντο: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ φόντο: -webkit-gradient(γραμμικό, αριστερό επάνω, αριστερό κάτω, color-stop(0%,#caf7ce), color- stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ φόντο: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ φόντο: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ φόντο: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96% ); /* IE10+ */ φόντο: γραμμική κλίση(προς τα κάτω, #caf7ce 0%,#caf7ce 18%,#3fe81e 4 5%,#2ab22a 96%); /* W3C */ φίλτρο: progid:DXImageTransform. Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ ).progress:after ( περιεχόμενο: ""; πλάτος: 100%; ύψος: 29 px; δεξιά: 0; κάτω: 0; θέση: απόλυτη; z-index: 3; φόντο: -moz- linear-gradient(αριστερά, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ φόντο: -webkit-gradient(γραμμικό, αριστερό επάνω μέρος, επάνω δεξιά, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ φόντο: -webkit-linear-gradient(αριστερά , rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ φόντο: -o-linear-gradient(αριστερά, rgba(202,247,206,0) 0 %, rgba(42,178,42,1) 100%), /* Opera 11,10+ */ φόντο: -ms-linear-gradient(αριστερά, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100 %). .gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ ) .bar ( margin-top: 30px; ύψος: 40px; πλάτος: 600px; posi θέση: σχετική; περίγραμμα: 1px στερεό #777; ακτίνα περιγράμματος: 3 εικονοστοιχεία )
Είχα παρόμοιο πρόβλημα και χρησιμοποίησα
@-webkit-keyframes pan ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ;))
Είναι λίγο ενοχλητικό που πρέπει να πλαστογραφείς τη διάρκειά σου για να λογαριάσεις «καθυστερήσεις» και από τις δύο πλευρές.
Αυτό πρέπει να κάνετε. Θα πρέπει να λειτουργεί έτσι ώστε να έχετε μια κίνηση 1 δευτερολέπτου και στη συνέχεια μια καθυστέρηση 4 δευτερολέπτων μεταξύ των επαναλήψεων:
@keyframes barshine ( 0% ( background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0,25) -5%,rgba(255,255,255,0) 0%; ) background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0,25) 105%,rgba(255,255,255,0) 110%); ;)
Οπότε έχω ασχοληθεί πολύ με αυτό και μπορείς να το κάνεις χωρίς να είσαι πολύ χακάριος. Αυτός είναι ο ευκολότερος τρόπος για να ορίσετε μια καθυστέρηση μεταξύ των επαναλήψεων κινούμενων εικόνων: 1. SUPER EASY και 2. χρειάζεται απλώς λίγη λογική. Δείτε αυτό το κινούμενο σχέδιο χορού που έφτιαξα:
Χορός( animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: infinite; -webkit-animation-itation-count: infinite; animation-duration: 2,5s; -webkit-animation-duration: 2,5 δευτ.; -webkit-animation-delay: 2,5s; animation-delay: 2,5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; ) @keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transformation: rotate(0deg); ) 25 % ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transformation: rotate( -120 deg); ) 50% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg)); rotate(20deg); ) 100% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) ) @-webkit-keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg ); μετασχηματισμός: rotate(0deg); ) 20% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate( 20 deg); μετασχηματισμός: περιστροφή (20 μοίρες); ) 40% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms- μετασχηματισμός: περιστροφή (-120 μοίρες), μετασχηματισμός: περιστροφή (-120 μοίρες) -ms-transform: rotate(0deg); transformation: rotate(0deg); ) 80% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate( -120 deg); -ms-transform: rotate(-120deg); transformation: rotate(-120deg); ) 95% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o- transform: rotate(20deg); -ms-transform: rotate(20deg); μετασχηματισμός: περιστροφή (20 μοίρες); ) )
Στην πραγματικότητα ήρθα εδώ προσπαθώντας να καταλάβω πώς να καθυστερήσω μια κινούμενη εικόνα όταν κατάλαβα ότι απλώς 1. παρατείνεις τη διάρκεια της κινούμενης εικόνας και κερδίζεις ένα ποσοστό του χρόνου για κάθε κινούμενη εικόνα. Πριν τα είχα 0,5 δευτερόλεπτα το καθένα για συνολική διάρκεια 2,5 δευτερολέπτων. Τώρα ας πούμε ότι ήθελα να προσθέσω μια καθυστέρηση ίση με τη συνολική διάρκεια, άρα η καθυστέρηση είναι 2,5 δευτερόλεπτα.
Ο χρόνος κίνησης είναι 2,5 δευτερόλεπτα και η καθυστέρηση είναι 2,5, οπότε αλλάζετε τη διάρκεια σε 5 δευτερόλεπτα. Ωστόσο, δεδομένου ότι έχετε διπλασιάσει τη συνολική διάρκεια, θα πρέπει να μειώσετε στο μισό το κλάσμα της κίνησης. Δείτε τα πιο πρόσφατα παρακάτω. Αυτό λειτούργησε υπέροχα για μένα.
@-webkit-keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); μετασχηματισμός: περιστροφή (0 μοίρες); ) 10% ( -webkit-transform: περιστροφή (20 deg); -moz-transform: rotate (20 deg); -o-transform: rotate (20 deg); -ms-transform: rotate (20 deg) ; μετασχηματισμός: περιστροφή (20 μοίρες); ) 20% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: περιστροφή (-120 μοίρες); μετασχηματισμός: περιστροφή (-120 μοίρες); ) 30% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms -transform: rotate(0deg); transformation: rotate(0deg); ) 40% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg ); -ms-transform: rotate(-120deg); transformation: rotate(-120deg); ) 50% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transfo rm: περιστροφή (0 deg); ) )
Αυτοί είναι οι υπολογισμοί σας που πιθανώς χρησιμοποιείτε για να καταλάβετε πώς μπορείτε να αλλάξετε τη διάρκεια της κινούμενης εικόνας και το % κάθε μέρους.
επιθυμία_διάρκεια = x
wish_duration = animation_part_duration1 + animation_part_duration2 + ... (και ούτω καθεξής)
συνολική διάρκεια = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration
Έφτιαξα μια αφίσα στον τοίχο που κινείται κατά διαστήματα δεξιά και αριστερά. Για μένα αυτό λειτουργεί:
Div-animation ( -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animation: bounce 2000ms ease-out infinite-animationb; -καθυστέρηση: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; ) @-webkit-keyframes bounce ( 0% ( transformation: rotate(0deg); ) 3% ( μετασχηματισμός: περιστροφή (1 μοίρες); ) 6% ( μετασχηματισμός: περιστροφή (2 μοίρες); ) 9% ( μετασχηματισμός: περιστροφή (3 μοίρες); ) 12% ( μετασχηματισμός: περιστροφή (2 μοίρες); ) 15% ( μετασχηματισμός: περιστροφή (1 μοίρες) ); ) 18% ( μετασχηματισμός: περιστροφή (0 μοίρες); ) 21% ( μετασχηματισμός: περιστροφή (-1 μοίρες); ) 24% ( μετασχηματισμός: περιστροφή (-2 μοίρες); ) 27% ( μετασχηματισμός: περιστροφή (-3 μοίρες); ) 30% ( μετασχηματισμός: περιστροφή (-2 μοίρες); ) 33% ( μετασχηματισμός: περιστροφή (-1 μοίρες); ) 36% ( μετασχηματισμός: περιστροφή (0 μοίρες); ) 100% ( μετασχηματισμός: περιστροφή (0 μοίρες); ) )