Animația CSS nu trebuie să înceapă imediat după ce este inițializată. Puteți controla când începe să utilizați proprietatea tranziție-întârziere. Pentru a întârzia tranziția pentru un anumit timp, specificați-o în valoarea proprietății:
Tranziție-întârziere: 1s; /* întârzie începutul animației cu o secundă */
Această proprietate este puțin folosită atunci când implementați interactivitate simplă pe un site web, dar poate fi foarte utilă dacă trebuie să creați efecte mai complexe. Prin analogie cu durata tranziției, puteți scrie timpul de întârziere pentru fiecare proprietate specificată în proprietatea tranziției (de asemenea, este important să respectați ordinea de enumerare):
Proprietate de tranziție: culoare, culoare de fundal, spațiere între litere; tranziție-durată: 1s, .5s, 2s; tranziție-întârziere: 0s, 0s, 2s; /* întârzie animația cu spațierea literelor cu 2 secunde */
Nu uitați de compatibilitatea între browsere - absolut toate proprietățile familiei tranziție necesită utilizarea prefixelor de furnizor:
Webkit-tranziție-întârziere: 1s; -moz-tranziție-întârziere: 1s; -o-tranziție-întârziere: 1s; tranziție-întârziere: 1s;
Uz practic
În practică, proprietatea de întârziere a tranziției este adesea folosită la crearea meniurilor drop-down care se deschid atunci când treceți cu mouse-ul deasupra. În acest caz, este scris nu numai pentru starea inițială, ci și pentru cea finală.
Este posibil să fi observat că pe unele site-uri, submeniurile derulante dispar prea repede, ceea ce face dificilă găsirea linkului potrivit și clic pe el. Proprietatea de întârziere a tranziției, setată pentru un element obișnuit și pentru un element cu pseudo-class:hover, ajută la prevenirea acestui comportament. Valorile vor fi diferite: pentru o stare normală, proprietatea de întârziere a tranziției ar trebui să fie mai mare decât zero, iar pentru o stare de hover ar trebui să fie 0. Exemplu:
Submeniu ( opacitate: 0; proprietatea tranziției: toate; durata tranziției: .5s; întârzierea tranziției: 1s; ) .menu:hover .submeniu ( opacitate: 1; întârzierea tranziției: 0s; )
Acest cod va face ca meniul să apară la trecerea cursorului fără întârziere și să dispară cu o secundă. Acest truc va face cu siguranță meniul mai convenabil de utilizat.
Proprietatea animation-delay setează timpul de așteptare înainte de a începe bucla de animație. O valoare de 0s sau 0ms pornește imediat animația. O valoare negativă permite, de asemenea, animația fără întârziere, dar poate face ca animația să înceapă să apară diferit.
Este permisă specificarea mai multor valori, listându-le separate prin virgule.
informatie scurta
Sintaxă
animație-întârziere:<время> [,<время>]*
Denumiri
| Descriere | Exemplu | |
|---|---|---|
| <тип> | Indică tipul valorii. | <размер> |
| A && B | Valorile trebuie să fie afișate în ordinea specificată. | <размер> && <цвет> |
| A | B | Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B). | normal | litere mici |
| A || B | Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine. | lățime || numara |
| Grupează valori. | [ recolta || cruce ] | |
| * | Repetați de zero sau de mai multe ori. | [,<время>]* |
| + | Repetați una sau mai multe ori. | <число>+ |
| ? | Tipul, cuvântul sau grupul specificat este opțional. | medalion? |
| (A, B) | Repetați cel puțin A, dar nu mai mult de B ori. | <радиус>{1,4} |
| # | Repetați o dată sau de mai multe ori, separate prin virgule. | <время># |
Exemplu
Model obiect
Un obiect.style.animationDelay
Notă
Chrome, Safari și Android acceptă proprietatea -webkit-animation-delay.
Opera până la versiunea 12.10 acceptă proprietatea -o-animation-delay.
Firefox până la versiunea 16 acceptă proprietatea -moz-animation-delay.
Specificație
Fiecare specificație trece prin mai multe etape de aprobare.
- Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
- Recomandarea candidatului ( Recomandare posibilă) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
- Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
- Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
- Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
- Ciornă ( Proiect de specificație) - prima versiune a standardului.
Browsere
Browsere
Următoarele notații sunt utilizate în tabelul browserului.
| Valoarea initiala | 0s |
|---|---|
| Se aplică la | toate elementele, ::înainte și ::după pseudo-elemente |
| Mostenit | Nu |
| Mass-media | vizual |
| Valoarea calculată | așa cum se specifică |
| Tip de animație | discret |
| Ordine canonică | ordinea unică neambiguă definită de gramatica formală |
Compatibilitate browser
Tabelul de compatibilitate de pe această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.
Actualizați datele de compatibilitate pe GitHub
| Desktop | Mobil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Crom | Margine | Firefox | Internet Explorer | Operă | Safari | Vizualizare web Android | Chrome pentru Android | Firefox pentru Android | Opera pentru Android | Safari pe iOS | Samsung Internet | |
| animație-întârziere | Chrome Suport deplin 43 Asistență deplină 43 Asistență deplină 3 Prefixate Prefixate | Edge Suport complet 12 | Firefox Suport complet 16 Note Sprijin deplin 16Note Note Înainte de Firefox 57, Firefox nu revopsește elementele din afara ferestrei de vizualizare care sunt animate în fereastra de vizualizare cu întârziere. Această eroare afectează doar unele platforme, cum ar fi Windows. Suport complet 49Prefixate Prefixate Implementat cu prefixul furnizorului: -webkit- Suport complet 44Prefixate Dezactivat Prefixate Implementat cu prefixul furnizorului: -webkit- Dezactivat Din versiunea 44: această caracteristică se află în spatele preferinței layout.css.prefixes.webkit (trebuie setată la true). Pentru a schimba preferințele în Firefox, vizitați about:config. Suport total 5Prefixate Prefixate Implementat cu prefixul de furnizor: -moz- | IE Suport complet 10 | Opera Asistență deplină 30 Asistență deplină 30 Asistență deplină 15 Prefixate Prefixate Implementat cu prefixul furnizorului: -webkit- Fără suport 12.1 - 15 Fără suport 12 - 15Prefixate Prefixate Implementat cu prefixul de furnizor: -o- | Safari Asistență deplină 9 Asistență deplină 9 Asistență deplină 4 Prefixate Prefixate Implementat cu prefixul de furnizor: -webkit- | WebView Android Suport complet 43 Suport complet 43 Suport complet ≤37 Prefixate Prefixate Implementat cu prefixul de furnizor: -webkit- | Chrome Android Suport complet 43 Suport complet 43 Suport complet 18 Prefixate Prefixate Implementat cu prefixul de furnizor: -webkit- | Firefox Android Suport complet 16 Suport complet 16 Suport complet 49 | |||
Întârzierea animației CSS la repetare (5)
Iată un mic fragment care arată același lucru în 75% din timp, apoi alunecă. Acest model care se repetă emulează bine latența:
Slide @-webkit-keyframes ( 0% (poziție fundal: 0 0;) 25% (poziție fundal: 0 0;) 50% (poziție fundal: 0 0;) 75% (poziția fundal: 0 0;) ) 100% (poziția de fundal: 13em 0;) ) Slide @-moz-keyframes ( 0% (poziția de fundal: 0 0;) 25% (poziția de fundal: 0 0;) 50% (poziția de fundal: 0 0;) 75% (poziție de fundal: 0 0;) 100% (poziție de fundal: 13em 0;) ) @keyframes slide ( 0% (poziția de fundal: 0 0;) 25% (poziția de fundal: 0 0 ;) 50% (poziție de fundal: 0 0;) 75% (poziție de fundal: 0 0;) 100% (poziție de fundal: 13em 0;) )
Recent am descoperit cum să folosesc animațiile CSS „corect” (în prealabil le respingesem ca nu pot crea secvențe complexe așa cum ați putea face în JavaScript). Așa că acum învăț despre ei.
Pentru acest efect, încerc să fac un „flash” în gradient să acopere elementul de tip progres. Similar cu efectul asupra barelor de progres native ale Windows Vista/7.
@keyframes barshine (de la (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25)) -5%,rgba(255,255,255,0) la (0%)); fundal -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) ) . ;)
După cum puteți vedea, încerc să obțin o întârziere de 4 secunde, urmată de un flash de 1 secundă, care se repetă.
Cu toate acestea, se pare că întârzierea animației este aplicată doar la prima iterație, după care sclipiciul continuă să fluture.
Am „rezolvat” această problemă după cum urmează:
@keyframes expbarshine ( de la (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25)) -5%,rgba(255,255,255,0) 80%); ( imagine de fundal:gradient-liniar(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0,25) -5%,rgba(255,255,255,0) 0%);) la (imagine de fundal:liniară- gradient (120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) .progbar ( animație: barshin infinit; 5 linii: barshin infinit;
de la și 80% sunt exact aceleași, rezultând o „întârziere” de 80% din durata animației.
Acest lucru funcționează, dar pentru următoarea mea animație am nevoie ca întârzierea să fie variabilă (constantă pentru un anumit element, dar variabilă între elementele care utilizează animația), în timp ce animația în sine rămâne aceeași lungime.
Cu „soluția” de mai sus, primesc o animație mai lentă când tot ce vreau este o întârziere mai mare.
Este posibil să se aplice întârzierea animației tuturor iterațiilor, nu doar primei?
minitech are dreptate că animation-delay specifică întârzierea înainte ca animația să înceapă și NUîntârziere între iterații. Editorul schiței de specificații descrie bine acest lucru și a existat o discuție aici despre această caracteristică pe care o descrieți și care oferă această funcție de întârziere a iterației.
Deși poate exista o soluție de soluție în JS, puteți falsifica această întârziere de iterație pentru a afișa bara de progres folosind doar CSS.
Prin declararea poziției torței div: absolut și a depășirii div-ului părinte: ascuns, setând starea cadru-cheie cu 100% mai mare decât lățimea barei de progres și jucând cu funcția de sincronizare a bezierului cubic și valorile offset stânga, puteți emula o lumină. modul ease -in-out sau timp liniar cu „întârziere”.
Ar fi interesant să scriem un mixin mai mic/scss pentru a calcula cu exactitate deplasarea la stânga și funcția de timp pentru a obține exact acest lucru, dar nu am timp să mă joc cu el acum. Mi-ar plăcea să văd așa ceva!
Iată un demo pe care l-am creat pentru a arăta asta. (Am încercat să emulez bara de progres din Windows 7 și am căzut puțin, dar demonstrează despre ce vorbesc)
/* CSS */ @keyframes progres ( de la ( lățime: 0px; ) la ( lățime: 600px; ) ) @keyframes barshine ( 0% ( stânga: -100px; ) 100% ( stânga: 1000px; ) ) .flare ( animație -nume: barshine; animație-durată: 3s; animație-direcție: normal; animație-fill-mode: înainte; animație-funcție de sincronizare: cubic-bezier(.14, .75, .2, 1.01); animație-iterație -număr: infinit; stânga: 0; sus: 0; înălțime: 40px; lățime: 100px; poziție: absolut; fundal: -moz-radial-gradient(centru, capac elipsă, rgba(255,255,255,0.69) 0%, rgba( 255.255.255,0) 87%); /* FF3.6+ */ fundal: -webkit-gradient(radial, centru centru, 0px, centru centru, 100%, oprire culoare(0%,rgba(255,255,255,0,69)) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ fundal: -webkit-radial-gradient(centru, elipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255 ,0) 87%); /* Chrome10+,Safari5.1+ */ fundal: -o-radial-gradient(centru, capac elipsă, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */ fundal: -ms-radial-gradient(center, elipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ fundal: radial-gradient(elipsa la centru, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* IE6-9 fallback pe gradient orizontal */ z-index: 10; ) .progres (nume-animație: progres; durata-animație: 10s; întârziere-animație: 1s; funcție-animație-temporizare: liniară; număr-iterație-animație: infinit; overflow: ascuns; poziție: relativă; z-index: 1; înălțime: 100%; lățime: 100%; chenar-dreapta: 1px solid #0f9116; fundal: #caf7ce; /* Browsere vechi */ fundal: -moz-linear-gradient(sus, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ fundal: -webkit-gradient(liniar, stânga sus, stânga jos, color-stop(0%,#caf7ce), culoare- stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ fundal: -webkit-linear-gradient(sus, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ fundal: -o-linear-gradient(sus, #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ fundal: -ms-linear-gradient(sus, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96% ); /* IE10+ */ fundal: gradient liniar (în jos, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */ filtru: progid:DXImageTransform. Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ ) .progres:după (conținut: ""; lățime: 100%; înălțime: 29px; dreapta: 0; jos: 0; poziție: absolut; z-index: 3; fundal: -moz- gradient-liniar(stânga, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ fundal: -webkit-gradient(liniar, stânga sus, dreapta sus, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ fundal: -webkit-linear-gradient(stânga , rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ fundal: -o-linear-gradient(stânga, rgba(202,247,206,0) 0 %,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ fundal: -ms-linear-gradient(stânga, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100 %); /* IE10+ */ fundal: gradient liniar(la dreapta, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ filtru: progid:DXImageTransform.Microsoft .gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ ) .bar ( margin-top: 30px; înălțime: 40px; lățime: 600px; poziție: relativă ; chenar: 1px solid #777; chenar-rază: 3px; )
Am avut o problema asemanatoare si am folosit
@-webkit-keyframes pan ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ;))
Un pic enervant este că trebuie să-ți falsifici durata pentru a ține cont de „întârzierile” la ambele capete.
Asta ar trebui să faci. Ar trebui să funcționeze astfel încât să aveți o animație de 1 secundă și apoi o întârziere de 4 secunde între iterații:
@keyframes barshine ( 0% ( imagine de fundal:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25)) -5%,rgba(255,255,255,0) 20% (20%); imagine-de-fond:gradient-liniar(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0,25) 105%,rgba(255,255,255,0) 110%); ) .progbar liniar infinit (5 animații: bară infinită; )
Așa că m-am încurcat mult cu asta și poți să o faci fără să fii piratat. Acesta este cel mai simplu mod de a seta o întârziere între iterațiile animației: 1. SUPER UȘOR și 2. necesită doar puțină logică. Vezi această animație de dans pe care am făcut-o:
Dans( animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: infinit; -webkit-animation-iteration-count: infinit; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; -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: rotire(0deg); -moz-transform: rotire(0deg); -o-transform: rotire(0deg); -ms-transform: rotire(0deg); transformare: rotire(0deg); ) 25 % ( -webkit-transform: rotiți(-120deg); -moz-transform: rotiți(-120deg); -o-transform: rotiți(-120deg); -ms-transform: rotiți(-120deg); transformați: rotiți( -120deg); ) 50% ( -webkit-transform: rotire(20deg); -moz-transform: rotire (20deg); -o-transform: rotire (20deg); -ms-transform: rotire (20deg); transformare: rotiți(20deg); ) 100% ( -webkit-transform: rotiți(0deg); -moz-transform: rotiți (0deg); -o-transform: rotiți (0deg); -ms-transform: rotiți (0deg); transformați : rotire(0deg); ) ) @-webkit-keyframes dance ( 0% ( -webkit-transform: rotiți(0deg); -moz-transform: rotiți(0deg); -o-transform: rotiți(0deg); -ms-transform: rotiți(0deg); ); transform: rotiți(0deg); ) 20% ( -webkit-transform: rotiți(20deg); -moz-transform: rotiți(20deg); -o-transform: rotiți(20deg); -ms-transform: rotiți( 20deg); transformare: rotire(20deg); ) 40% ( -webkit-transform: rotire(-120deg); -moz-transform: rotire (-120deg); -o-transform: rotire (-120deg); -ms- transform: rotire(-120deg); transform: rotire(-120deg); ) 60% ( -webkit-transform: rotire(0deg); -moz-transform: rotire(0deg); -o-transform: rotire(0deg); -ms-transform: rotire(0deg); transformare: rotire(0deg); ) 80% ( -webkit-transform: rotire(-120deg); -moz-transform: rotire(-120deg); -o-transform: rotire( -120deg); -ms-transform: rotire(-120deg); transform: rotire (-120deg); ) 95% ( -webkit-transform: rotire (20deg); -moz-transform: rotire (20deg); -o- transformare: rotire(20deg); -ms-transform: rotire(20deg);transformare: rotire(20deg); ) )
De fapt, am venit aici încercând să-mi dau seama cum să întârzi o animație când mi-am dat seama că doar 1. prelungiți durata animației și formați proporția de timp pentru fiecare animație. Beore le-am avut fiecare cu o durată de 0,5 secunde pentru o durată totală de 2,5 secunde. Acum să spun că am vrut să adaug o întârziere egală cu durata totală, deci întârzierea este de 2,5 secunde.
Timpul de animație este de 2,5 secunde și întârzierea este de 2,5, așa că modificați durata la 5 secunde. Cu toate acestea, deoarece ați dublat durata totală, trebuie să înjumătățiți porțiunea de animație. Vezi mai jos cele mai recente. Acest lucru a funcționat grozav pentru mine.
@-webkit-keyframes dance ( 0% ( -webkit-transform: rotiți(0deg); -moz-transform: rotiți(0deg); -o-transform: rotiți(0deg); -ms-transform: rotiți(0deg); transform: rotiți(0deg); ) 10% ( -webkit-transform: rotiți(20deg); -moz-transform: rotiți(20deg); -o-transform: rotiți (20deg); -ms-transform: rotiți(20deg) ; transform: rotire(20deg); ) 20% ( -webkit-transform: rotire(-120deg); -moz-transform: rotire(-120deg); -o-transform: rotire (-120deg); -ms-transform: rotire(-120deg); transformare: rotire(-120deg); ) 30% ( -webkit-transform: rotire(0deg); -moz-transform: rotire(0deg); -o-transform: rotire(0deg); -ms -transform: rotiți(0deg); transform: rotiți(0deg); ) 40% ( -webkit-transform: rotiți(-120deg); -moz-transform: rotiți(-120deg); -o-transform: rotiți (-120deg); ); -ms-transform: rotire(-120deg); transformare: rotire (-120deg); ) 50% ( -webkit-transform: rotire(0deg); -moz-transform: rotire (0deg); -o-transform: rotire(0deg); -ms-transform: rotire(0grade);transformare: rotire(0deg); ) )
Acestea sunt calculele dvs. pe care probabil le utilizați pentru a vă da seama cum să schimbați durata animației și procentul fiecărei părți.
durata_dorintei = x
wish_duration = animation_part_duration1 + animation_part_duration2 + ... (și așa mai departe)
durata totală = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration
Am făcut un afiș pe perete care se mișcă în stânga și în dreapta la intervale de timp. Pentru mine funcționează:
Div-animation ( -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animație: bounce 2000ms ease-out infinit; -webkit-animation -întârziere: 2s; /* Chrome, Safari, Opera */ întârziere animație: 2s; originea transformării: 55% 10%; ) @-webkit-keyframes bounce ( 0% ( transformare: rotire(0deg); ) 3% ( transformare: rotire(1grade); ) 6% ( transformare: rotire(2grade); ) 9% ( transformare: rotire(3grade); ) 12% ( transformare: rotire(2grade); ) 15% ( transformare: rotire(1grade); ) ); ) 18% ( transformare: rotire(0grade); ) 21% ( transformare: rotire(-1grade); ) 24% ( transformare: rotire(-2grade); ) 27% ( transformare: rotire(-3grade); ) 30% ( transformare: rotire(-2grade); ) 33% ( transformare: rotire(-1grade); ) 36% ( transformare: rotire(0grade); ) 100% ( transformare: rotire(0grade); ) )
