CSS animacija ne mora početi odmah nakon što je inicijalizirana. Možete kontrolirati kada počinje sa svojstvom prijelaz-kašnjenje. Da biste odgodili prijelaz na određeno vrijeme, navedite ga u vrijednosti svojstva:
Prijelazno kašnjenje: 1s; /* odgodi početak animacije za jednu sekundu */
Ovo svojstvo je od male koristi kada se implementira jednostavna interaktivnost na web mjestu, ali može biti vrlo korisno ako trebate kreirati složenije efekte. Po analogiji sa tranzicionim trajanjem, možete napisati vreme kašnjenja za svako svojstvo navedeno u svojstvu tranzicije (takođe je važno pratiti redosled nabrajanja):
Svojstvo prijelaza: boja, boja pozadine, razmak između slova; trajanje prijelaza: 1s, .5s, 2s kašnjenje tranzicije: 0s, 0s, 2s /* odgodi animaciju razmaka između slova za 2 sekunde */
Ne zaboravite na kompatibilnost među pretraživačima - apsolutno sva svojstva porodice tranzicija zahtijevaju upotrebu prefiksa dobavljača:
webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-prijelaz-kašnjenje: 1s; kašnjenje tranzicije: 1s;
Praktična upotreba
U praksi, svojstvo kašnjenja tranzicije se često koristi prilikom kreiranja padajućih menija koji se proširuju pri lebdenju. U ovom slučaju, piše se ne samo za početno stanje, već i za konačno.
Možda ste primijetili da na nekim stranicama padajući podmeniji nestaju prebrzo, što otežava uhvatiti željenu vezu i kliknuti na nju. Svojstvo kašnjenja tranzicije postavljeno na normalan element i na element s pseudo-class:hover pomaže u sprječavanju ovakvog ponašanja. Vrijednosti će se razlikovati: za normalno stanje, svojstvo kašnjenja tranzicije mora biti postavljeno na vrijednost veću od nule, a za lebdeće stanje mora biti postavljeno na 0. Primjer:
Podmeni ( neprozirnost: 0; svojstvo tranzicije: sve; trajanje tranzicije: .5s; kašnjenje tranzicije: 1s; ) .menu:hover .podmeni (prozirnost: 1; kašnjenje tranzicije: 0s; )
Ovaj kod će uzrokovati da se meni pojavi pri lebdenju bez odlaganja, a nestanak će biti odgođen za jednu sekundu. Ovaj trik će definitivno učiniti meni lakšim za upotrebu.
Svojstvo kašnjenja animacije postavlja količinu vremena za čekanje prije pokretanja animacijske petlje. Vrijednost od 0s ili 0ms odmah započinje animaciju. Negativna vrijednost također omogućava animaciju bez odlaganja, ali može promijeniti izgled početka animacije.
Dozvoljeno je navesti više vrijednosti navodeći ih odvojenim zarezima.
kratke informacije
Sintaksa
kašnjenje animacije:<время> [,<время>]*
Notacija
| Opis | Primjer | |
|---|---|---|
| <тип> | Određuje tip vrijednosti. | <размер> |
| A&&B | Vrijednosti se moraju ispisati navedenim redoslijedom. | <размер> && <цвет> |
| A | B | Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B). | normalno | small-caps |
| A || B | Svaka vrijednost se može koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom. | širina || count |
| Grupne vrijednosti. | [ usev || križ] | |
| * | Ponovite nula ili više puta. | [,<время>]* |
| + | Ponovite jedan ili više puta. | <число>+ |
| ? | Navedeni tip, riječ ili grupa su opcioni. | umetnuti? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | <радиус>{1,4} |
| # | Ponovite jedan ili više puta odvojeno zarezima. | <время># |
Primjer
Objektni model
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 prije verzije 16 podržava svojstvo -moz-animation-delay.
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobrenja.
- Preporuka (Recommendation) - specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
- Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
- Radni nacrt – zreliji nacrt nakon rasprave i amandmana za reviziju zajednice.
- Nacrt urednika ( Urednički nacrt) je nacrt standarda nakon što su urednici projekta izvršili izmjene.
- nacrt ( Nacrt specifikacije) je prva verzija verzije standarda.
Pregledači
Pregledači
Sljedeća notacija se koristi u tabeli pretraživača.
| početna vrijednost | 0s |
|---|---|
| Odnosi se na | svi elementi, pseudoelementi ::prije i ::poslije |
| Naslijeđeno | br |
| Mediji | vizuelno |
| Izračunata vrijednost | kako je navedeno |
| Vrsta animacije | diskretno |
| kanonski poredak | jedinstveni nedvosmisleni poredak definisan formalnom gramatikom |
Kompatibilnost pretraživača
Tabela kompatibilnosti na ovoj stranici je generirana 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
| Desktop | Mobilni | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | rub | Firefox | Internet Explorer | Opera | safari | android webview | 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 Prefiks Prefiks | Edge Puna podrška 12 | Firefox Puna podrška 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. Ova greška utiče samo na neke platforme, kao što je Windows. Potpuna podrška 49Prefiks Prefiks Implementirano sa prefiksom dobavljača: -webkit- Puna podrška 44Prefiks Onemogućeno Prefiks Implementirano sa prefiksom dobavljača: -webkit- Disabled Od verzije 44: ova funkcija je iza postavke layout.css.prefixes.webkit (treba biti postavljena na true). Za promjenu postavki u Firefoxu posjetite about:config. Potpuna podrška 5Prefiks Prefiks Implementirano s prefiksom dobavljača: -moz- | IE puna podrška 10 | Opera Puna podrška 30 Potpuna podrška 30 Potpuna podrška 15 Prefiks Prefiks Implementirano sa prefiksom dobavljača: -webkit- Nema podrške 12.1 - 15 Nema podrške 12 - 15Prefiks Prefiks Implementirano s prefiksom dobavljača: -o- | Safari puna podrška 9 puna podrška 9 puna podrška 4 Prefiks Prefiks Implementirano s prefiksom dobavljača: -webkit- | WebView Android Puna podrška 43 Puna podrška 43 Puna podrška ≤37 Prefiks Prefiks Implementirano s prefiksom dobavljača: -webkit- | Chrome Android Potpuna podrška 43 Potpuna podrška 43 Potpuna podrška 18 Prefiks Prefiks Implementirano s prefiksom dobavljača: -webkit- | Firefox Android Puna podrška 16 Potpuna podrška 16 Potpuna podrška 49 | |||
CSS animacija kašnjenje u ponavljanju (5)
Evo malog isječka koji pokazuje istu stvar 75% vremena, a zatim se uvlači. Ovaj ponavljajući obrazac dobro oponaša kašnjenje:
@-webkit-keyframes slajd (0% (pozicija pozadine: 0 0;) 25% (pozicija pozadine: 0 0;) 50% (pozicija pozadine: 0 0;) 75% (pozicija pozadine: 0 0; ) 100% (pozicija pozadine: 13em 0;) ) @-moz-keyframes slajd ( 0% (pozicija pozadine: 0 0;) 25% (pozicija pozadine: 0 0;) 50% (pozicija pozadine: 0 0;) 75% (pozicija pozadine: 0 0;) 100% (pozicija pozadine: 13em 0;) ) @keyframes slajd ( 0% (pozicija pozadine: 0 0;) 25% (pozicija pozadine: 0 0 ;) 50% (pozicija pozadine: 0 0;) 75% (pozicija pozadine: 0 0;) 100% (pozicija pozadine: 13em 0;) )
Nedavno sam otkrio kako da "ispravno" koristim CSS animacije (prethodno sam ih odbacio jer ne mogu da kreiraju složene sekvence kao što biste to mogli u JavaScriptu). Dakle, sada učim o njima.
Za ovaj efekat, pokušavam da gradijent "flere" pokrije element nalik na napredak. Slično kao i na izvornim trakama napretka za Windows Vista/7.
@keyframes barshine (od (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) do background)); -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) .prog animations:finite bar shi bar; )
Kao što vidite, pokušavam da dobijem kašnjenje od 4 sekunde praćeno svetlucanjem od 1 sekunde, ponavljajući.
Međutim, čini se da se kašnjenje animacije odnosi samo na prvu iteraciju, nakon čega svjetlucanje samo nastavlja da se ljulja.
Ovo pitanje sam "riješio" na sljedeći način:
@keyframes expbarshine (od (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0)) 80%; background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) do (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 (animacija: barshine infinite
od i 80% su potpuno isti, što rezultira "kašnjenjem" od 80% dužine animacije.
Ovo funkcionira, ali za moju sljedeću animaciju, potrebno mi je da kašnjenje bude varijabilno (konstantno na određenom elementu, ali promjenljivo među elementima koji koriste animaciju), dok sama animacija ostaje iste dužine.
Sa "rješenjem" iznad, završavam sa sporijom animacijom kada sve što želim je duže odlaganje.
Da li je moguće primijeniti kašnjenje animacije na sve iteracije, a ne samo na prvu?
minitech je u pravu da animation-delay specificira kašnjenje prije nego što animacija počne i NE kašnjenje između iteracija. Uređivač nacrta specifikacija ovo dobro opisuje, a bilo je i diskusije o ovoj funkciji koju opisujete koja nudi ovu funkciju odlaganja ponavljanja.
Iako može postojati zaobilazno rješenje u JS-u, možete lažirati ovo iterativno kašnjenje za bljesak trake napretka koristeći samo CSS.
Deklaracijom pozicije baklje podjele pozicija:apsolutna i prelijevanje: hidden na roditeljskom divu overflow: hidden , postavljanjem 100 posto stanja ključnog kadra da bude veće od širine trake napretka i igranjem s kubnom bezierovom vremenskom funkcijom i vrijednostima pomaka na lijevoj strani, možete emulirati mod za ublažavanje svjetlosti -ulaz-izlaz ili linearno vrijeme sa "kašnjenjem".
Bilo bi interesantno napisati manji/scss mixin da precizno izračunam levi offset i funkciju vremena da dobijem ovo tačno, ali trenutno nemam vremena da se igram s tim. Volio bih vidjeti ovako nešto!
Evo demo koji sam sastavio da to pokažem. (Pokušao sam emulirati traku napretka Windows 7 i malo sam pao, ali to pokazuje o čemu govorim)
/* CSS */ @keyframes napredak ( od ( širina: 0px; ) do ( širina: 600px; ) ) @keyframes barshine ( 0% ( lijevo: -100px; ) 100% ( lijevo: 1000px; ) ) .flare ( animacija -ime: barshine; trajanje animacije: 3 s; pravac animacije: normalan; način animacije punjenja: naprijed; funkcija vremena animacije: kubični bezier (.14, .75, .2, 1.01); iteracija animacije -broj: beskonačan; lijevo: 0; vrh: 0; visina: 40px; širina: 100px; pozicija: apsolutna; pozadina: -moz-radial-gradient(centar, poklopac elipse, rgba(255,255,255,0.69) 0%, rgba( 255,255,255,0) 87%); /* FF3.6+ */ pozadina: -webkit-gradient(radijalno, centar centar, 0px, centar centar, 100%, boja-stop(0%,rgba(255,255,255,0.69)) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(centar, poklopac elipse, rgba(255,255,255,0.69) 0%,rgba(255,555) ,0) 87%);/* Chrome10+,Safari5.1+ */ pozadina: -o-radijalni-gradijent(centar, poklopac elipse, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* O pera 12+ */ pozadina: -ms-radial-gradient(centar, poklopac elipse, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ pozadina: radijalni gradijent(elipsa u 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 backback na horizontalnom gradijentu */ z-index: 10; ) .progress (ime-animacije: napredak; trajanje-animacije: 10s; kašnjenje-animacija: 1s; funkcija-vremenska-animacija: linearna; brojanje-iteracije animacije: beskonačno; prelijevanje: skriveno; pozicija: relativna; z-indeks: 1; visina: 100%; širina: 100%; granica desno: 1px čvrsta #0f9116; pozadina: #caf7ce; /* Stari pretraživači */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ pozadina: -webkit-gradient(linearno, lijevo gore, lijevo dolje, boja-stop (0%,#caf7ce), boja- stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ pozadina: -ms-linear-gradient(top, #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 */ ).progress:after ( sadržaj: ""; širina: 100%; visina: 29px; desno: 0; dolje: 0; pozicija: apsolutna; z-indeks: 3; pozadina: -moz- linear-gradient(lijevo, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ pozadina: -webkit-gradient(linearno, lijevo gore, desno gore, color-stop(0%,rgba(202,247,206,0)), color-stop(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(levo, 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 položaj: relativan; granica: 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) ; ) )
Pomalo je neugodno što morate lažirati svoje trajanje kako biste uračunali "kašnjenja" s oba kraja.
To je ono što morate učiniti. Trebalo bi raditi tako da imate animaciju od 1 sekunde, a zatim 4 sekunde kašnjenja između iteracija:
@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%); ) ) (animations.prog u finite baru) ;)
Tako da sam se dosta bavio ovim i možete to učiniti bez da budete mnogo haki. Ovo je najlakši način da postavite kašnjenje između iteracija animacije: 1. SUPER LAKO i 2. samo je potrebno malo logike. Pogledajte ovu plesnu animaciju koju sam napravio:
Ples(ime-animacije: ples; -webkit-ime-animacije: ples; brojanje-iteracije animacije: beskonačno; -webkit-animation-iteration-count: beskonačno; trajanje-animacije: 2,5 s; -webkit-trajanje-animacije: 2,5 s; -webkit-animation-dey: 2,5s; animacija-kašnjenje: 2,5s; animacija-timeing-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); transform: rotate(0deg); ) 25 % ( -webkit-transform: rotirati (-120 stupnjeva); -moz-transform: rotirati (-120 stupnjeva); -o-transform: rotirati (-120 stupnjeva); -ms-transform: rotirati (-120 stupnjeva); transformirati: rotirati ( -120deg); ) 50% ( -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); ) 100% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transformacija: rotirati(0deg); ) ) @-webkit-keyframes ples ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); ); transformirati: rotirati (0 stupnjeva); ) 20% ( -webkit-transform: rotirati (20 stupnjeva); -moz-transform: rotirati (20 stupnjeva); -o-transform: rotirati (20 stupnjeva); -ms-transform: rotirati ( 20 stepeni); transformacija: rotirati (20 stepeni); ) 40% ( -webkit-transform: rotirati (-120 stepeni); -moz-transform: rotirati (-120 stepeni); -o-transform: rotirati (-120 stepeni); -ms- transform: rotirati(-120deg); transform: rotate(-120deg); ) 60% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) 80% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate( -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); transformacija: rotirati (20 stepeni); ) )
Zapravo sam došao ovdje pokušavajući shvatiti kako odgoditi animaciju kada sam shvatio da samo 1. produžite trajanje animacije i dobijete dio vremena za svaku animaciju. Prije sam ih imao po 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 sekundi, 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, morat ćete prepoloviti dio animacije. U nastavku pogledajte najnovije. Ovo mi je odlično funkcioniralo.
@-webkit-keyframes ples ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);) 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) ; transformirati: rotirati (20 stupnjeva); ) 20% ( -webkit-transform: rotirati (-120 stupnjeva); -moz-transform: rotirati (-120 stupnjeva); -o-transform: rotirati (-120 stupnjeva); -ms-transform: rotate(-120deg); transform: rotate(-120deg); ) 30% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms -transform: rotate(0deg); transform: rotate(0deg); ) 40% ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg) ); -ms-transform: rotate(-120deg); transform: rotate(-120deg); ) 50% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotirati (0 stupnjeva); -ms-transform: rotirati (0 stupnjeva); transfo rm: rotirati (0deg); ) )
Ovo su vaše kalkulacije koje vjerojatno koristite da shvatite kako promijeniti trajanje animacije i % 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
Napravio sam poster na zidu koji se pomjera lijevo i desno u intervalima. Kod mene ovo 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; transformacija porijekla: 55% 10%; ) @-webkit-keyframes odbijanja ( 0% ( transformacija: rotacija (0deg); ) 3% ( transformacija: rotirati (1 stepen); ) 6% ( transformacija: rotirati (2 stepen); ) 9% ( transformacija: rotirati (3 stepen); ) 12% ( transformacija: rotirati (2 stepen); ) 15% ( transformacija: rotirati (1 stepen); ); ) 18% ( transformacija: rotirati(0deg); ) 21% (transformacija: rotirati(-1deg); ) 24% (transformacija: rotirati(-2deg); ) 27% (transformacija: rotirati(-3deg); ) 30% ( transformacija: rotirati(-2deg); ) 33% (transformacija: rotirati(-1deg); ) 36% (transformacija: rotirati(0deg); ) 100% (transformacija: rotirati(0deg); ) )
