CSS animacija ne mora početi odmah nakon što je inicijalizirana. Njegov početak možete kontrolirati svojstvom prijelaz-kašnjenje. Da biste odgodili prijelaz na određeno vrijeme, navedite ga u vrijednosti svojstva:
Prijelaz-kašnjenje: 1s; / * odgodi početak animacije za jednu sekundu * /
Ovo svojstvo se malo koristi pri implementaciji jednostavne interaktivnosti na web-mjestu, ali može biti vrlo korisno ako morate stvoriti složenije efekte. Po analogiji s trajanjem prijelaza, možete napisati vrijeme kašnjenja za svako svojstvo navedeno u svojstvu prijelaza (također je važno pridržavati se redoslijeda nabrajanja):
Prijelazno svojstvo: boja, boja pozadine, razmak između slova; trajanje prijelaza: 1s, .5s, 2s; kašnjenje prijelaza: 0s, 0s, 2s; / * odgodi animaciju razmaka između slova za 2 sekunde * /
Ne zaboravite na kompatibilnost s različitim preglednicima - apsolutno sva svojstva obitelji tranzicija zahtijevaju upotrebu prefiksa dobavljača:
Webkit-prijelaz-kašnjenje: 1s; -moz-prijelaz-kašnjenje: 1s; -o-prijelaz-kašnjenje: 1s; prijelaz-kašnjenje: 1s;
Praktična upotreba
U praksi se svojstvo kašnjenja prijelaza često koristi pri stvaranju padajućih izbornika koji se pojavljuju pri lebdenju. U ovom slučaju, piše se ne samo za početno stanje, već i za konačno stanje.
Možda ste primijetili da na nekim stranicama padajući podizbornici prebrzo nestaju, pa je teško uhvatiti željenu vezu i kliknuti na nju. Svojstvo kašnjenja tranzicije, koje je postavljeno za regularni element i za element s pseudoklasom: hover, pomaže u sprječavanju ovakvog ponašanja. Vrijednosti će biti različite: za normalno stanje, svojstvo kašnjenja prijelaza mora biti veće od nule, a za stanje lebdenja mora biti 0. Primjer:
Podizbornik (neprozirnost: 0; svojstva prijelaza: sve; trajanje prijelaza: .5s; kašnjenje prijelaza: 1s;) .izbornik: lebdjeti .podizbornik (prozirnost: 1; kašnjenje prijelaza: 0s;)
Ovaj kod će uzrokovati da se izbornik pojavi pri lebdenju bez odgode, a nestanak će biti odgođen za jednu sekundu. Ovaj trik će zasigurno učiniti jelovnik lakšim za korištenje.
Svojstvo kašnjenja animacije postavlja vrijeme čekanja prije pokretanja animacijske petlje. Vrijednost od 0s ili 0ms odmah započinje animaciju. Negativna vrijednost također omogućuje animaciju bez kašnjenja, ali može promijeniti izgled početka animacije.
Dopušteno je navesti nekoliko vrijednosti, navodeći ih odvojene zarezima.
kratke informacije
Sintaksa
kašnjenje animacije:<время> [,<время>]*
Oznake
| Opis | Primjer | |
|---|---|---|
| <тип> | Označava vrstu vrijednosti. | <размер> |
| A && B | Vrijednosti moraju biti prikazane prikazanim redoslijedom. | <размер> && <цвет> |
| A | B | Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B). | normalno | male kapice |
| A || B | Svaka vrijednost može se koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom. | širina || računati |
| Grupne vrijednosti. | [usjev || križ] | |
| * | Ponovite nula ili više puta. | [,<время>]* |
| + | Ponovite jedan ili više puta. | <число>+ |
| ? | Navedena vrsta, riječ ili grupa nije obavezna. | umetnuti? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | <радиус>{1,4} |
| # | Ponovite jedan ili više puta, odvojeno zarezima. | <время># |
Primjer
Model objekta
Objekt.style.animationDelay
Bilješka
Chrome, Safari i Android podržavaju svojstvo -webkit-animation-delay.
Opera prije verzije 12.10 podržava svojstvo -o-animation-delay.
Firefox verzija 16 podržava svojstvo -moz-animation-delay.
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobrenja.
- Preporuka - Ovu specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da je u skladu s njegovim ciljevima, ali je za implementaciju standarda potrebna pomoć razvojne zajednice.
- Predložena preporuka ( Predložena preporuka) - U ovom trenutku dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt – zrelija verzija nacrta nakon rasprave i amandmana za reviziju zajednice.
- Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon uređivanja od strane urednika projekta.
- Nacrt ( Nacrt specifikacije) je prvi nacrt standarda.
Preglednici
Preglednici
U tablici preglednika koriste se sljedeće konvencije.
| Početna vrijednost | 0s |
|---|---|
| Odnosi se na | svi elementi, :: prije i :: poslije pseudoelemenata |
| Naslijeđeno | Ne |
| Mediji | vizualni |
| Izračunata vrijednost | kako je navedeno |
| Vrsta animacije | diskretna |
| Kanonski poredak | jedinstveni nedvosmisleni poredak definiran formalnom gramatikom |
Kompatibilnost preglednika
Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako "želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.
Ažurirajte podatke o kompatibilnosti na GitHubu
| Radna površina | Mobilni | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Krom | Rub | Firefox | Internet Explorer | Opera | Safari | Android web-prikaz | Chrome za Android | Firefox za Android | Opera za Android | Safari na iOS-u | Samsung Internet | |
| animacija-kašnjenje | Chrome Potpuna podrška 43 Potpuna podrška 43 Potpuna podrška 3 S prefiksom S prefiksom | Edge Puna podrška 12 | Puna podrška za Firefox 16 Bilješke Potpuna podrška 16Bilješke Bilješke Prije Firefoxa 57, Firefox ne preslikava elemente izvan okvira za prikaz koji su animirani u okvir za prikaz sa zakašnjenjem. Ovaj bug utječe samo na neke platforme, kao što je Windows. Potpuna podrška 49S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -webkit- Puna podrška 44S prefiksom Onemogućeno S prefiksom Implementirano s prefiksom dobavljača: -webkit- Onemogućeno Od verzije 44: ova značajka stoji iza postavke layout.css.prefixes.webkit (treba biti postavljena na true). Za promjenu postavki u Firefoxu posjetite about: config. Potpuna podrška 5S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -moz- | IE puna podrška 10 | Opera Puna podrška 30 Potpuna podrška 30 Potpuna podrška 15 S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -webkit- Nema podrške 12.1 - 15 Nema podrške 12 - 15S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -o- | Safari Potpuna podrška 9 Potpuna podrška 9 Potpuna podrška 4 S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -webkit- | WebView Android Puna podrška 43 Potpuna podrška 43 Puna podrška ≤37 S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -webkit- | Chrome Android Puna podrška 43 Potpuna podrška 43 Potpuna podrška 18 S prefiksom S prefiksom Implementirano s prefiksom dobavljača: -webkit- | Firefox Android Puna podrška 16 Potpuna podrška 16 Potpuna podrška 49 | |||
Odgodi CSS animaciju u ponavljanju (5)
Evo malog isječka koji pokazuje isto 75% vremena, a zatim klizi. Ovaj krug koji se ponavlja dobro oponaša kašnjenje:
@ -webkit-keyframes slajd (0% (položaj pozadine: 0 0;) 25% (položaj pozadine: 0 0;) 50% (položaj pozadine: 0 0;) 75% (položaj pozadine: 0 0; ) 100% (položaj pozadine: 13em 0;)) @ -moz-keyframes slajd (0% (položaj pozadine: 0 0;) 25% (položaj pozadine: 0 0;) 50% (položaj pozadine: 0 0;) 75% (položaj pozadine: 0 0;) 100% (položaj pozadine: 13em 0;)) @keyframes slajd (0% (položaj pozadine: 0 0;) 25% (položaj pozadine: 0 0 ;) 50% (položaj pozadine: 0 0;) 75% (položaj pozadine: 0 0;) 100% (položaj pozadine: 13em 0;))
Nedavno sam otkrio kako "ispravno" koristiti CSS animacije (prije sam ih odbacio jer ne mogu stvoriti složene sekvence kao što biste to mogli u JavaScriptu). Pa sad saznajem za njih.
Za ovaj efekt trudim se da gradijent "bljeska" pokrije element koji izgleda kao napredak. Slično učinku na izvornim trakama napretka sustava Windows Vista/7.
@keyframes barshine (od (pozadinska slika: linearni gradijent (120 stupnjeva, rgba (255,255,255,0) -10%, rgba (255,255,255,0,25) -5%, rgba (255,255,255%),0) (pozadina); -slika: linearni gradijent (120 stupnjeva, rgba (255,255,255,0) 100%, rgba (255,255,255,0,25) 105%, rgba (255,255,255,0) 110%);)). )
Kao što možete vidjeti, pokušavam dobiti kašnjenje od 4 sekunde praćeno blještavicom koja prolazi kroz 1 sekundu, ponavljajući se.
Međutim, čini se da se kašnjenje animacije odnosi samo na prvu iteraciju, nakon čega svjetlucanje samo nastavlja ljuljati.
Ovo pitanje sam "riješio" na sljedeći način:
@keyframes expbarshine (od (pozadinska slika: linearni gradijent (120 stupnjeva, rgba (255,255,255,0) -10%, rgba (255,255,255,0,25) -5%, rgba (255,255,205%),) ;) pozadinska slika: linearni gradijent (120 stupnjeva, rgba (255,255,255,0) -10%, rgba (255,255,255,0,25) -5%, rgba (255,255,255,0) 0%);) do (pozadinska slika: (120 stupnjeva, rgba (255,255,255,0) 100%, rgba (255,255,255,0,25) 105%, rgba (255,255,255,0) 110%);)) .progbar (finite 5) linearshi in
od i 80% su potpuno isti, što rezultira "kašnjenjem" od 80% duljine animacije.
Ovo funkcionira, ali za moju sljedeću animaciju trebam da kašnjenje bude promjenjivo (konstantno za određeni element, ali varijabilno među elementima koji koriste animaciju) dok sama animacija ostaje iste duljine.
S gornjim "rješenjem" dobivam sporiju animaciju kada je sve što želim duže odgode.
Je li moguće da se kašnjenje animacije primijeni na sve iteracije, a ne samo na prvu?
minitech je točno da animation-delay specificira odgodu prije početka animacije, i NE kašnjenje između iteracija. Uređivač nacrta specifikacija to dobro opisuje, a ovdje se raspravljalo o značajci koju opisujete koja nudi ovu značajku odgode ponavljanja.
Iako u JS-u može postojati zaobilazno rješenje, možete lažirati ovu odgodu iteracije za bljesak trake napretka koristeći samo CSS.
Deklariranjem položaja div pozicije baklje: apsolutni i preljev: skriven roditeljskog div preljev: skriven, postavljanje 100% stanja ključnog kadra veće od širine trake napretka i igranje s kubičnom bezierovom vremenskom funkcijom i vrijednostima pomaka na lijevoj strani, možete oponašati način olakšanja -in-out ili linearno vrijeme s "kašnjenjem".
Bilo bi zanimljivo napisati less / scss mixin za točno izračunavanje lijevog pomaka i funkcije vremena da se to točno dobije, ali trenutno nemam vremena igrati se s tim. Volio bih vidjeti ovako nešto!
Evo demo koji sam sastavio da to pokažem. (Pokušao sam oponašati traku napretka sustava Windows 7 i malo sam pao, ali pokazuje o čemu govorim)
/ * CSS * / @keyframes napreduje (od (širina: 0px;) do (širina: 600px;)) @keyframes barshine (0% (lijevo: -100px;) 100% (lijevo: 1000px;)) .flare (animacija -naziv: barshine; trajanje animacije: 3 s; smjer animacije: normalan; način punjenja animacije: naprijed; funkcija vremena animacije: cubic-bezier (.14, .75, .2, 1.01); iteracija animacije -broj: beskonačan; lijevo: 0; vrh: 0; visina: 40px; širina: 100px; položaj: apsolutni; pozadina: -moz-radial-gradient (centar, poklopac elipse, rgba (255,255,255,0,69) 0%, rgba ( 255,255,255,0) 87%); / * FF3.6 + * / pozadina: -webkit-gradijent (radijalno, središnji centar, 0px, središnji centar, 100%, zaustavljanje boje (0%, rgba (255,255,255,0,69)) , zaustavljanje boje (87%, rgba (255,255,255,0))); / * Chrome, Safari4 + * / pozadina: -webkit-radial-gradient (centar, poklopac elipse, rgba (255,255,255,0,69) 0%, rgba ( 255,255,255 , 0) 87%); / * Chrome10 +, Safari5.1 + * / pozadina: -o-radial-gradient (centar, poklopac elipse, rgba (255,255,255,0,69) 0%, rgba (255,2505),285% ); / * O pera 12+ * / pozadina: -ms-radijalni-gradijent (centar, poklopac elipse, rgba (255,255,255,0,69) 0%, rgba (255,255,255,0) 87%); / * IE10 + * / pozadina: radijalni gradijent (elipsa u sredini, 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 zamjenski za horizontalni gradijent * / z-indeks: 10; ) .progress (naziv-animacije: napredak; animacija-trajanje: 10s; animacija-kašnjenje: 1s; animacija-vremenska-funkcija: linearna; animacija-iteracija-broj: beskonačan; preljev: skriven; položaj: relativan; z-indeks: 1; visina: 100%; širina: 100%; obrub desno: 1px čvrsta # 0f9116; pozadina: # caf7ce; / * Stari preglednici * / pozadina: -moz-linear-gradient (vrh, # caf7ce 0%, # caf7ce 18%, # 3fe81e 45%, # 2ab22a 96%); / * FF3.6 + * / pozadina: -webkit-gradient (linearno, lijevo gore, lijevo dolje, boja-stop (0%, # caf7ce), boja- zaustavljanje (18%, # caf7ce), zaustavljanje boje (45%, # 3fe81e), zaustavljanje boje (96%, # 2ab22a)); / * Chrome, Safari4 + * / pozadina: -webkit-linear-gradient (vrh , # caf7ce 0%, # caf7ce 18%, # 3fe81e 45%, # 2ab22a 96%); / * Chrome10 +, Safari5.1 + * / pozadina: -o-linear-gradient (vrh, # caf7ce 0%, # caf7ce 18%, # 3fe81e 45%, # 2ab22a 96%); / * Opera 11.10+ * / pozadina: -ms-linear-gradient (vrh, # caf7ce 0%, # caf7ce 18%, # 3fe81e 45%, # 2ab22a 96% ); / * IE10 + * / pozadina: linearni gradijent (do dna, # caf7ce 0%, # caf7ce 18%, # 3fe81e 4 5%, # 2ab22a 96%); / * W3C * / filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = "# caf7ce", endColorstr = "# 2ab22a", GradientType = 0); / * IE6-9 * /) .napredak: nakon (sadržaj: ""; širina: 100%; visina: 29px; desno: 0; dolje: 0; položaj: apsolutna; z-indeks: 3; pozadina: -moz- linearni gradijent (lijevo, rgba (202,247,206,0) 0%, rgba (42,178,42,1) 100%); / * FF3.6 + * / pozadina: -webkit-gradient (linearno, lijevo gore, desno gore, zaustavljanje boje (0%, rgba (202,247,206,0)), zaustavljanje boje (100%, rgba (42,178,42,1))); / * Chrome, Safari4 + * / pozadina: -webkit-linear-gradient ( lijevo , rgba (202,247,206,0) 0%, rgba (42,178,42,1) 100%); / * Chrome10 +, Safari5.1 + * / pozadina: -o-linear-gradient (lijevo, rgba (202,247,206,0) ) 0 %, rgba (42,178,42,1) 100%); / * Opera 11.10+ * / pozadina: -ms-linear-gradient (lijevo, rgba (202,247,206,0) 0%, rgba (42,178,42,1) ) 100 %); / * IE10 + * / pozadina: linearni gradijent (desno, rgba (202,247,206,0) 0%, rgba (42,178,42,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft .gradient (startColorstr = "# 00caf7ce", endColorstr = "# 2ab22a", GradientType = 1); / * IE6-9 * /) .bar (margin-top: 30px; visina: 40px; širina: 600px; posi cija: relativna; obrub: 1px čvrsta # 777; radijus granice: 3px; )
Imao sam sličan problem i koristio sam
@ -webkit-keyframes pan (0%, 10% (-webkit-transform: translate3d (0%, 0px, 0px);) 90%, 100% (-webkit-transform: translate3d (-50%, 0px, 0px) ;))
Malo neugodno što morate lažirati svoje trajanje kako biste uračunali "kašnjenja" na oba kraja.
Ovo bi trebao raditi. Trebao bi raditi tako da imate animaciju od 1 sekunde, a zatim odgodu od 4 sekunde između iteracija:
@keyframes barshine (0% (pozadinska slika: linearni gradijent (120 stupnjeva, rgba (255,255,255,0) 0%, rgba (255,255,255,0,25) -5%, rgba (255,255,255%)) 20) ) pozadinska slika: linearni gradijent (120 stupnjeva, rgba (255,255,255,0) 10%, rgba (255,255,255,0,25) 105%, rgba (255,255,255,0) 110%);)) . ;)
Tako sam učinio puno s ovim i možete to učiniti bez da budete jako hackirani. Ovo je najlakši način za postavljanje odgode između iteracija animacije: 1. SUPER LAKO i 2. zahtijeva samo malo logike. Pogledajte ovu plesnu animaciju koju sam napravio:
Ples (naziv-animacije: ples; -webkit-animation-name: dance; animacija-iteracija-count: beskonačan; -webkit-animation-iteration-count: beskonačan; trajanje animacije: 2,5 s; -webkit-animation-duration: 2,5 s; -webkit-animation-dey: 2,5s; animacija-kašnjenje: 2,5s; animacija-timeing-function: ease-in; -webkit-animation-time-function: ease-in;) @keyframes dance (0% (-webkit-transform: rotirati (0 stupnjeva); -moz-transform: rotirati (0 stupnjeva); -o-transform: rotirati (0 stupnjeva); -ms-transform: rotirati (0 stupnjeva); transformirati: rotirati (0 stupnjeva);) 25 % (-webkit-transform: rotirati (-120 stupnjeva); -moz-transform: rotirati (-120 stupnjeva); -o-transform: rotirati (-120 stupnjeva); -ms-transform: rotirati (-120 stupnjeva); transformirati: rotirati ( -120 stupnjeva);) 50% (-webkit-transform: rotirati (20 stupnjeva); -moz-transform: rotirati (20 stupnjeva); -o-transform: rotirati (20 stupnjeva); -ms-transform: rotirati (20 stupnjeva); transformirati: rotirati (20 stupnjeva);) 100% (-webkit-transform: rotirati (0 stupnjeva); -moz-transform: rotirati (0 stupnjeva); -o-transform: rotirati (0 stupnjeva); -ms-transform: rotirati (0 stupnjeva); transformirati: rotirati (0deg); )) @ -webkit-keyframes ples (0% (-webkit-transform: rotirati (0 stupnjeva); -moz-transform: rotirati (0 stupnjeva); -o-transform: rotirati (0 stupnjeva); -ms-transform: rotirati (0 stupnjeva) ); transformacija: rotirati (0 stupnjeva);) 20% (-webkit-transform: rotirati (20 stupnjeva); -moz-transform: rotirati (20 stupnjeva); -o-transform: rotirati (20 stupnjeva); -ms-transform: rotirati ( 20 stupnjeva); transformacija: rotirati (20 stupnjeva);) 40% (-webkit-transform: rotirati (-120 stupnjeva); -moz-transform: rotirati (-120 stupnjeva); -o-transform: rotirati (-120 stupnjeva); -ms- transformirati: rotirati (-120 stupnjeva); transformirati: rotirati (-120 stupnjeva);) 60% (-webkit-transform: rotirati (0 stupnjeva); -moz-transform: rotirati (0 stupnjeva); -o-transform: rotirati (0 stupnjeva); -ms-transform: rotirati (0 stupnjeva); transformirati: rotirati (0 stupnjeva);) 80% (-webkit-transform: rotirati (-120 stupnjeva); -moz-transform: rotirati (-120 stupnjeva); -o-transform: rotirati ( -120 stupnjeva); -ms-transform: rotirati (-120 stupnjeva); transformirati: rotirati (-120 stupnjeva);) 95% (-webkit-transform: rotirati (20 stupnjeva); -moz-transform: rotirati (20 stupnjeva); -o- transformirati: rotirati (20 stupnjeva); -ms-transform: rotirati (20 stupnjeva); transformirati: rotirati (20 stupnjeva); ))
Zapravo sam došao ovdje pokušavajući shvatiti kako odgoditi animaciju kada sam shvatio da samo 1. produžujete trajanje animacije i birate udio vremena za svaku animaciju. Prije sam ih imao svaki u trajanju od 0,5 sekundi u ukupnom trajanju od 2,5 sekunde. Sada recimo da sam htio dodati kašnjenje jednako ukupnom trajanju, tako da je kašnjenje 2,5 sekunde.
Vrijeme animacije je 2,5 sekunde, a kašnjenje je 2,5, tako da možete promijeniti trajanje na 5 sekundi. Međutim, budući da ste udvostručili ukupno trajanje, trebate prepoloviti dio animacije. U nastavku pogledajte potonje. Ovo mi je odlično funkcioniralo.
@ -webkit-keyframes ples (0% (-webkit-transform: rotirati (0 stupnjeva); -moz-transform: rotirati (0 stupnjeva); -o-transform: rotirati (0 stupnjeva); -ms-transform: rotirati (0 stupnjeva); transformirati: rotirati (0 stupnjeva);) 10% (-webkit-transform: rotirati (20 stupnjeva); -moz-transform: rotirati (20 stupnjeva); -o-transform: rotirati (20 stupnjeva); -ms-transform: rotirati (20 stupnjeva) ; transform: rotirati (20 stupnjeva);) 20% (-webkit-transform: rotirati (-120 stupnjeva); -moz-transform: rotirati (-120 stupnjeva); -o-transform: rotirati (-120 stupnjeva); -ms-transform: rotirati (-120 stupnjeva); transformirati: rotirati (-120 stupnjeva);) 30% (-webkit-transform: rotirati (0 stupnjeva); -moz-transform: rotirati (0 stupnjeva); -o-transform: rotirati (0 stupnjeva); -ms -transform: rotirati (0 stupnjeva); transformirati: rotirati (0 stupnjeva);) 40% (-webkit-transform: rotirati (-120 stupnjeva); -moz-transform: rotirati (-120 stupnjeva); -o-transform: rotirati (-120 stupnjeva ); -ms-transform: rotirati (-120 stupnjeva); transformirati: rotirati (-120 stupnjeva);) 50% (-webkit-transform: rotirati (0 stupnjeva); -moz-transform: rotirati (0 stupnjeva); -o-transform: rotirati (0 stupnjeva); -ms-transform: rotirati (0 stupnjeva); transfo rm: rotirati (0 stupnjeva); ))
Ovo su vaši izračuni koje vjerojatno koristite da shvatite kako promijeniti trajanje animacije i postotak svakog dijela.
trajanje_želje = x
wish_duration = animation_part_duration1 + animation_part_duration2 + ... (i tako dalje)
ukupno trajanje = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration
Na zidu sam napravio poster koji se u intervalima pomiče lijevo-desno. Ovo mi radi:
Div-animacija (-webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animacija: bounce 2000ms ease-out beskonačno; -webkit -kašnjenje: 2s; / * Chrome, Safari, Opera * / kašnjenje animacije: 2s; izvor transformacije: 55% 10%;) @ -webkit-keyframes odbijaju (0% (transformacija: rotirati (0deg);) 3% (transformacija: rotirati (1 stupanj);) 6% (transformacija: rotirati (2 stupnjeva);) 9% (transformirati: rotirati (3 stupnjeva);) 12% (transformirati: rotirati (2 stupnjeva);) 15% (transformirati: rotirati (1 stupanj); );) 18% (transformacija: rotirati (0 stupnjeva);) 21% (transformacija: rotirati (-1 stupnjeva);) 24% (transformirati: rotirati (-2 stupnjeva);) 27% (transformirati: rotirati (-3 stupnjeva);) 30% (transformacija: rotirati (-2deg);) 33% (transformacija: rotirati (-1deg);) 36% (transform: rotirati (0deg);) 100% (transform: rotirati (0deg);))
