Animacioni CSS nuk duhet të fillojë menjëherë pasi të jetë inicializuar. Mund ta kontrolloni fillimin e tij me vetinë e vonesës së tranzicionit. Për të shtyrë kalimin për një kohë të caktuar, specifikoni atë në vlerën e pronës:
Kalim-vonesa: 1s; / * vononi fillimin e animacionit me një sekondë * /
Kjo veçori përdoret pak kur zbatohet interaktiviteti i thjeshtë në një faqe interneti, por mund të jetë mjaft i dobishëm nëse duhet të krijoni efekte më komplekse. Për analogji me kohëzgjatjen e tranzicionit, mund të shkruani kohën e vonesës për secilën pronë të specifikuar në pronën e tranzicionit (është gjithashtu e rëndësishme t'i përmbaheni rendit të numërimit):
Vetia e tranzicionit: ngjyra, ngjyra e sfondit, hapësira e shkronjave; tranzicioni-kohëzgjatja: 1s, .5s, 2s; kalim-vonesa: 0s, 0s, 2s; / * vonon animacionin e ndarjes së shkronjave me 2 sekonda * /
Mos harroni për pajtueshmërinë ndër-shfletues - absolutisht të gjitha pronat e familjes tranzicionit kërkojnë përdorimin e prefikseve të shitësit:
Webkit-transition-delay: 1s; -moz-kalim-vonesa: 1s; -o-kalim-vonesa: 1s; kalim-vonesa: 1s;
Përdorimi praktik
Në praktikë, vetia e vonesës së tranzicionit shpesh përdoret kur krijohen menytë rënëse që shfaqen kur rri pezull. Në këtë rast, shkruhet jo vetëm për gjendjen fillestare, por edhe për gjendjen përfundimtare.
Ju mund të keni vënë re se në disa sajte, nënmenytë rënëse zhduken shumë shpejt, duke e bërë të vështirë kapjen e lidhjes së dëshiruar dhe klikimin mbi të. Vetia transition-delay, e cila është caktuar për një element të rregullt dhe për një element me: hover pseudo-class, ndihmon për të parandaluar këtë sjellje. Vlerat do të jenë të ndryshme: për gjendjen normale, vetia e vonesës së tranzicionit duhet të jetë më e madhe se zero, dhe për gjendjen hover duhet të jetë 0. Shembull:
Nënmenyja (opaciteti: 0; vetia e tranzicionit: të gjitha; kohëzgjatja e tranzicionit: 0,5 sekonda; vonesa e kalimit: 1 sekonda;)
Ky kod do të bëjë që menyja të shfaqet në lëvizje pa vonesë dhe zhdukja do të vonohet me një sekondë. Ky truk patjetër do ta bëjë menunë më miqësore për përdoruesit.
Vetia animacion-vonesa cakton kohën për të pritur para fillimit të ciklit të animacionit. Një vlerë prej 0s ose 0ms fillon animacionin menjëherë. Një vlerë negative gjithashtu mundëson animimin pa vonesa, por mund të ndryshojë pamjen e fillimit të animacionit.
Lejohet të specifikohen disa vlera, duke i renditur ato të ndara me presje.
informacion të shkurtër
Sintaksë
animacion-vonesa:<время> [,<время>]*
Emërtimet
| Përshkrim | Shembull | |
|---|---|---|
| <тип> | Tregon llojin e vlerës. | <размер> |
| A & & B | Vlerat duhet të shfaqen në rendin e treguar. | <размер> && <цвет> |
| A | B | Tregon që vetëm një nga vlerat e sugjeruara duhet të zgjidhet (A ose B). | normale | kapele të vogla |
| A || B | Çdo vlerë mund të përdoret vetëm ose së bashku me të tjerat në çdo mënyrë. | gjerësia || numëroj |
| Vlerat e grupeve. | [kulture || kryq] | |
| * | Përsëriteni zero ose më shumë herë. | [,<время>]* |
| + | Përsëriteni një ose më shumë herë. | <число>+ |
| ? | Lloji, fjala ose grupi i specifikuar është opsional. | futur? |
| (A, B) | Përsëriteni të paktën A, por jo më shumë se B herë. | <радиус>{1,4} |
| # | Përsëriteni një ose më shumë herë, të ndara me presje. | <время># |
Shembull
Modeli i objektit
Nje objekt.stil.animacionVonesë
shënim
Chrome, Safari dhe Android mbështesin të gjitha veçorinë -webkit-animation-delay.
Opera para versionit 12.10 mbështet veçorinë -o-animation-delay.
Versioni 16 i Firefox-it mbështet veçorinë -moz-animation-delay.
Specifikim
Çdo specifikim kalon nëpër disa faza të miratimit.
- Rekomandim - Ky specifikim është miratuar nga W3C dhe rekomandohet si standard.
- Rekomandimi i Kandidatit ( Rekomandim i mundshëm) - grupi përgjegjës për standardin është i kënaqur që ai është në përputhje me objektivat e tij, por kërkohet ndihma e komunitetit të zhvilluesve për zbatimin e standardit.
- Rekomandimi i propozuar ( Rekomandim i sugjeruar) - Në këtë pikë, dokumenti i dorëzohet Këshillit Këshillimor të W3C për miratim përfundimtar.
- Drafti Punues - Një version më i pjekur i draftit pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
- Drafti i redaktorit ( Drafti editorial) - një draft version i standardit pas redaktimit nga redaktorët e projektit.
- draft ( Draft specifikimi) është drafti i parë i standardit.
Shfletuesit
Shfletuesit
Konventat e mëposhtme përdoren në tabelën e shfletuesit.
| Vlera fillestare | 0s |
|---|---|
| Zbatohet për | të gjithë elementët, :: para dhe :: pas pseudoelementeve |
| I trasheguar | nr |
| Media | vizuale |
| Vlera e llogaritur | siç specifikohet |
| Lloji i animacionit | diskrete |
| Rendi kanonik | renditja unike jo e dykuptimtë e përcaktuar nga gramatika formale |
Pajtueshmëria e shfletuesit
Tabela e përputhshmërisë në këtë faqe krijohet nga të dhënat e strukturuara. Nëse dëshironi të kontribuoni në të dhënat, ju lutemi shikoni https://github.com/mdn/browser-compat-data dhe na dërgoni një kërkesë për tërheqje.
Përditësoni të dhënat e përputhshmërisë në GitHub
| Desktop | Celular | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| krom | Buzë | Firefox | Internet Explorer | Opera | Safari | Pamja në internet e Android | Chrome për Android | Firefox për Android | Opera për Android | Safari në iOS | Internet Samsung | |
| animacion-vonesa | Chrome Mbështetje e plotë 43 Mbështetje e plotë 43 Mbështetje e plotë 3 Parashtesa Parashtesa | Mbështetje e plotë Edge 12 | Mbështetje e plotë për Firefox 16 Shënime Mbështetje e plotë 16Shënime Shënime Përpara Firefox 57, Firefox-i nuk i rilyen elementet jashtë portit të pamjes që animohen në portin e shikimit me vonesë. Ky gabim prek vetëm disa platforma, të tilla si Windows. Mbështetje e plotë 49Parashtesa Parashtesa Zbatuar me prefiksin e shitësit: -webkit- Mbështetje e plotë 44Parashtesa I paaftë Parashtesa Implementuar me prefiksin e shitësit: -webkit- Disabled Nga versioni 44: kjo veçori qëndron prapa preferencës layout.css.prefixes.webkit (duhet të vendoset në true). Për të ndryshuar preferencat në Firefox, vizitoni rreth: config. Mbështetje e plotë 5Parashtesa Parashtesa Zbatuar me prefiksin e shitësit: -moz- | IE Mbështetje e plotë 10 | Opera Mbështetje e plotë 30 Mbështetje e plotë 30 Mbështetje e plotë 15 Parashtesa Parashtesa Zbatuar me prefiksin e shitësit: -webkit- Nuk ka mbështetje 12.1 - 15 Nuk ka mbështetje 12 - 15Parashtesa Parashtesa Zbatuar me prefiksin e shitësit: -o- | Mbështetje e plotë Safari 9 Mbështetje e plotë 9 Mbështetje e plotë 4 Parashtesa Parashtesa Zbatuar me prefiksin e shitësit: -webkit- | WebView Android Mbështetje e plotë 43 Mbështetje e plotë 43 Mbështetje e plotë ≤37 Parashtesa Parashtesa Zbatuar me prefiksin e shitësit: -webkit- | Chrome Android Mbështetje e plotë 43 Mbështetje e plotë 43 Mbështetje e plotë 18 Parashtesa Parashtesa Zbatuar me prefiksin e shitësit: -webkit- | Firefox Android Mbështetje e plotë 16 Mbështetje e plotë 16 Mbështetje e plotë 49 | |||
Vonesa e animacionit CSS në përsëritje (5)
Ja një fragment i vogël që tregon të njëjtën 75% të rasteve, pastaj rrëshqet. Ky qark i përsëritur emulon mirë vonesën:
@ -webkit-keyframes rrëshqitje (0% (pozicioni i sfondit: 0 0;) 25% (pozicioni i sfondit: 0 0;) 50% (pozicioni i sfondit: 0 0;) 75% (pozicioni i sfondit: 0 0; ) 100% (pozicioni i sfondit: 13em 0;)) @ -moz-rrëshqitje e kornizave kyçe (0% (pozicioni në sfond: 0 0;) 25% (pozicioni i sfondit: 0 0;) 50% (pozicioni i sfondit: 0 0;) 75% (pozicioni në sfond: 0 0;) 100% (pozicioni i sfondit: 13em 0;)) rrëshqitje @frames kyçe (0% (pozicioni në sfond: 0 0;) 25% (pozicioni i sfondit: 0 0 ;) 50% (pozicioni në sfond: 0 0;) 75% (pozicioni në sfond: 0 0;) 100% (pozicioni në sfond: 13em 0;))
Kohët e fundit kam zbuluar se si të përdor "drejtë" animacionet CSS (më parë i kisha hedhur poshtë si të paaftë për të krijuar sekuenca komplekse siç mund të kishit në JavaScript). Kështu që tani mësoj rreth tyre.
Për këtë efekt, përpiqem që gradienti "flash" të mbulojë elementin që duket si progres. Ngjashëm me efektin në shiritat e përparimit të Windows Vista / 7.
@keyframes barshine (nga (sfondi-imazhi: gradient linear (120 gradë, rgba (255,255,255,0) -10%, rgba (255,255,255,0.25) -5%, rgba (255,255,255,0) në sfond (0%); -image: gradient linear (120deg, rgba (255,255,255,0) 100%, rgba (255,255,255,0.25) 105%, rgba (255,255,255,0) 110%);)). )
Siç mund ta shihni, unë po përpiqem të marr një vonesë prej 4 sekondash të ndjekur nga një shkëlqim që kalon në 1 sekondë, duke përsëritur.
Megjithatë, duket sikur vonesa e animacionit zbatohet vetëm për përsëritjen e parë, pas së cilës shkëlqimi thjesht vazhdon të lëkundet.
Këtë pyetje e "zgjidha" si më poshtë:
@keyframes expbarshine (nga (imazhi i sfondit: gradient linear (120 gradë, rgba (255,255,255,0) -10%, rgba (255,255,255,0.25) -5%, rgba (255,255,255,0%) () 0%; imazhi i sfondit: gradient linear (120 gradë, rgba (255,255,255,0) -10%, rgba (255,255,255,0.25) -5%, rgba (255,255,255,0) 0%);) në (imazhi i sfondit: linear- (120deg, rgba (255,255,255,0) 100%, rgba (255,255,255,0.25) 105%, rgba (255,255,255,0) 110%);)) .progbar (animacion: linear infinite 5;
nga dhe 80% janë saktësisht të njëjta, gjë që rezulton në një "vonesë" prej 80% të gjatësisë së animacionit.
Kjo funksionon, por për animacionin tim të radhës, më duhet që vonesa të jetë e ndryshueshme (konstante për një element specifik, por e ndryshueshme midis elementeve që përdorin animacionin) ndërsa vetë animacioni mbetet me të njëjtën gjatësi.
Me "zgjidhjen" e mësipërme, unë marr një animacion më të ngadaltë kur gjithçka që dua është një vonesë më e gjatë.
A është e mundur që vonesa e animacionit të zbatohet për të gjitha përsëritjet, jo vetëm për të parën?
minitech është e saktë që animation-delay specifikon një vonesë përpara fillimit të animacionit, dhe JO vonesa ndërmjet përsëritjeve. Redaktori i specifikimeve të draftit e përshkruan mirë këtë dhe veçoria që po përshkruani është diskutuar këtu që ofron këtë veçori të vonesës së përsëritjes.
Ndërsa mund të ketë një zgjidhje në JS, ju mund të falsifikoni këtë vonesë përsëritjeje për ndezjen e shiritit të progresit duke përdorur vetëm CSS.
Duke deklaruar pozicionin e div të pozicionit të pishtarit: absolut dhe tejmbushur: i fshehur i tejmbushjes së div mëmë: i fshehur, duke vendosur gjendjen 100% të kornizës kryesore më të madhe se gjerësia e shiritit të përparimit dhe duke luajtur me funksionin kub të kohës së bezier dhe vlerat e kompensimit në të majtë, mund të imitoni modalitetin e lehtësisë -në-jashtë ose kohën lineare me "vonesë".
Do të ishte interesante të shkruash një mixin më pak / scss për të llogaritur me saktësi kompensimin e majtë dhe funksionin e kohës për ta marrë këtë saktësisht, por nuk kam kohë të luaj me të tani. Do të doja të shihja diçka të tillë!
Këtu është një demonstrim që kam bashkuar për ta treguar atë. (Unë u përpoqa të imitoja shiritin e përparimit të Windows 7 dhe ra pak, por kjo tregon se për çfarë po flas)
/ * CSS * / @keyframes progresi (nga (gjerësia: 0px;) në (gjerësia: 600px;)) @keyframes barshine (0% (majtas: -100px;) 100% (majtas: 1000px;)) .flare (animacion -emri: barshine; kohëzgjatja e animacionit: 3s; drejtimi i animacionit: normal; modaliteti i mbushjes së animacionit: përpara; funksioni i kohës së animimit: kub-bezier (.14, .75, .2, 1.01); animacion-përsëritje -numërimi: i pafund; majtas: 0; lart: 0; lartësia: 40 px; gjerësia: 100 px; pozicioni: absolut; sfondi: -moz-radial-gradient (qendër, kopertina elips, rgba (255,255,255,0.69) 0%, rgba ( 255,255,255,0) 87%); / * FF3,6 + * / sfond: -gradient i paketës së internetit (radiale, qendra, 0 px, qendra qendrore, 100%, ndalesa e ngjyrave (0%, rgba (255,255,255,0,69) , color-stop (87%, rgba (255,255,255,0))); / * Chrome, Safari4 + * / sfond: -webkit-radial-gradient (qendër, mbulesë elipse, rgba (255,255,255,0.69) 0%, rgba ( 255,255,255 , 0) 87%); / * Chrome10 +, Safari5.1 + * / sfond: -o-radial-gradient (qendër, mbulesë elipse, rgba (255,255,255,0,69) 0%, rgba (255,255,25,25% );/ * O pera 12+ * / sfond: -ms-radial-gradient (qendër, mbulesë elipse, rgba (255,255,255,0.69) 0%, rgba (255,255,255,0) 87%); / * IE10 + * / sfond: radial-gradient (elipsi në qendër, rgba (255,255,255,0.69) 0%, rgba (255,255,255,0) 87%); / * W3C * / filtri: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# b0ffffff", endColorstr = "# 00ffffff", GradientType = 1); / * Rikthim IE6-9 në gradient horizontal * / z-indeksi: 10; ) .progres (emri i animacionit: progresi; animacioni-kohëzgjatja: 10 sekonda; animacioni-vonesa: 1s; animacioni-koha-funksioni: linear; animacioni-përsëritja-numërimi: i pafund; vërshimi: i fshehur; pozicioni: relativ; indeksi z: 1; lartësia: 100%; gjerësia: 100%; kufiri djathtas: 1px solid # 0f9116; sfondi: # caf7ce; / * Shfletuesit e vjetër * / sfondi: -moz-linear-gradient (lart, # caf7ce 0%, # caf7ce 18%, # 3fe81e 45%, # 2ab22a 96%); / * FF3.6 + * / sfond: - ueb-kit-gradient (lineare, lart majtas, fund majtas, ndalesa e ngjyrave (0%, # caf7ce), ngjyra- ndalesa (18%, # caf7ce), ndalesa e ngjyrave (45%, # 3fe81e), ndalesa e ngjyrave (96%, # 2ab22a)); / * Chrome, Safari4 + * / sfond: -webkit-linear-gradient (lart , # caf7ce 0%, # caf7ce 18%, # 3fe81e 45%, # 2ab22a 96%); / * Chrome10 +, Safari5.1 + * / sfond: -o-linear-gradient (lart, # caf7ce 0%, # caf7ce 18 %, # 3fe81e 45%, # 2ab22a 96%); / * Opera 11.10+ * / sfond: -ms-linear-gradient (lart, # caf7ce 0%, # caf7ce 18%, # 3fe81e 45%, # 2ab22a 96% ); / * IE10 + * / sfond: gradient linear (në fund, # caf7ce 0%, # caf7ce 18%, # 3fe81e 4 5%, # 2ab22a 96%); / * W3C * / filtri: progid: DXImageTransform. Microsoft.gradient (startColorstr = "# caf7ce", endColorstr = "# 2ab22a", GradientType = 0); / * IE6-9 * /) .progresi: pas (përmbajtja: ""; gjerësia: 100%; lartësia: 29 px; djathtas: 0; poshtë: 0; pozicioni: absolute; z-indeksi: 3; sfondi: -moz- gradient linear (majtas, rgba (202,247,206,0) 0%, rgba (42,178,42,1) 100%); / * FF3.6 + * / sfond: -kit ueb-gradient (linear, majtas lart, djathtas lart, color-stop (0%, rgba (202,247,206,0)), color-stop (100%, rgba (42,178,42,1))); / * Chrome, Safari4 + * / sfond: -webkit-linear-gradient ( majtas , rgba (202,247,206,0) 0%, rgba (42,178,42,1) 100%); / * Chrome10 +, Safari5.1 + * / sfond: -o-linear-gradient (majtas, rgba (202,247,206,0 ) 0 %, rgba (42,178,42,1) 100%); / * Opera 11,10+ * / sfond: -ms-linear-gradient (majtas, rgba (202,247,206,0) 0%, rgba (42,178,42,1 ) 100 %); / * IE10 + * / sfond: gradient linear (djathtas, rgba (202,247,206,0) 0%, rgba (42,178,42,1) 100%); / * W3C * / filtri: progid: DXImageTransform.Microsoft .gradient (startColorstr = "# 00caf7ce", endColorstr = "# 2ab22a", GradientType = 1); / * IE6-9 * /) .bar (margin-lart: 30px; lartësia: 40px; gjerësia: 60px posi tion: i afërm; kufiri: 1px solid # 777; kufiri-radius: 3px; )
Kam pasur një problem të ngjashëm dhe kam përdorur
Paneli @ -webkit-keyframes (0%, 10% (-webkit-transform: translate3d (0%, 0px, 0px);) 90%, 100% (-webkit-transform: translate3d (-50%, 0px, 0px) ;))
Pak e bezdisshme që ju duhet të falsifikoni kohëzgjatjen tuaj për të llogaritur "vonesat" në të dy skajet.
Kjo është ajo që ju duhet të bëni. Duhet të funksionojë në mënyrë që të keni një animacion 1 sekondë dhe më pas një vonesë prej 4 sekondash midis përsëritjeve:
@keyframes barshine (0% (imazhi i sfondit: gradient linear (120 gradë, rgba (255,255,255,0) 0%, rgba (255,255,255,0.25) -5%, rgba (255,255,255,0) 0% (%); imazhi i sfondit: gradient linear (120 gradë, rgba (255,255,255,0) 10%, rgba (255,255,255,0.25) 105%, rgba (255,255,255,0) 110%);)) .imationsanfinite lineshbar ;)
Kështu që unë bëra shumë me këtë dhe ju mund ta bëni pa qenë shumë haker. Kjo është mënyra më e lehtë për të vendosur vonesën ndërmjet përsëritjeve të animacionit: 1. SUPER EASY dhe 2. thjesht kërkon pak logjikë. Shikoni këtë animacion kërcimi që kam bërë:
Kërcim (emri i animacionit: kërcim; -webkit-animacion-emri: vallëzim; animacion-përsëritje-numër: i pafund; -kot-ueb-animacion-përsëritje-numër: i pafund; animacion-kohëzgjatja: 2,5 sekonda; -kotazhi-animacion-kohëzgjatja: 2.5s; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; animation-time-function: ease-in; -webkit-animation-timing-function: ease-in;) @keyframes dance (0% (-webkit-transform: rrotullo (0deg); -moz-transform: rrotullo (0deg); -o-transform: rrotullo (0deg); -ms-transform: rrotullo (0deg); transformim: rrotullo (0deg);) 25 % (-webkit-transform: rrotullo (-120deg); -moz-transform: rrotullo (-120deg); -o-transformo: rrotullo (-120deg); -ms-transform: rrotullo (-120deg); transformim: rrotullo (-120deg -120 gradë);) 50% (-webkit-transformim: rrotullo (20 gradë); -moz-transformim: rrotullo (20 gradë); -o-transformo: rrotullo (20 gradë); -ms-transformo: rrotullo (20 gradë); transformo: rrotullo (20 gradë);) 100% (-webkit-transformim: rrotullo (0 gradë); -moz-transformo: rrotullo (0 gradë); -o-transformo: rrotullo (0 gradë); -ms-transformo: rrotullo (0 gradë); transformimi: rrotullimi (0 gradë); )) @ -webkit-keyframes dance (0% (-webkit-transform: rrotullo (0deg); -moz-transform: rrotullo (0deg); -o-transform: rrotullo (0deg); -ms-transform: rrotullo (0deg ); transformim: rrotullo (0deg);) 20% (-webkit-transform: rrotullo (20deg); -moz-transform: rrotullo (20deg); -o-transformo: rrotullo (20deg); -ms-transformo: rrotullo ( 20deg); transformim: rrotullo (20deg);) 40% (-webkit-transform: rrotullo (-120deg); -moz-transform: rrotullo (-120deg); -o-transformo: rrotullo (-120deg); -ms- transformim: rrotullo (-120 gradë); transformim: rrotullo (-120 gradë);) 60% (-webkit-transformo: rrotullo (0 gradë); -moz-transformo: rrotullo (0 gradë); -o-transformo: rrotullo (0 gradë); -ms-transform: rrotullo (0deg); transformim: rrotullo (0deg);) 80% (-webkit-transform: rrotullo (-120deg); -moz-transformo: rrotullo (-120deg); -o-transformo: rrotullo ( -120 gradë); -ms-transformim: rrotullo (-120 gradë); transformim: rrotullo (-120 gradë);) 95% (-webkit-transformim: rrotullo (20 gradë); -moz-transformo: rrotullo (20 gradë); -o- transformimi: rrotullimi (20 gradë); -ms-transformimi: rrotullohet (20 gradë); transformimi: rrotullohet (20 gradë); ))
Në fakt, erdha këtu duke u përpjekur të kuptoj se si të vonoja një animacion kur kuptova se ti ishe vetëm 1. duke zgjatur kohëzgjatjen e animacionit dhe duke thirrur proporcionin e kohës për çdo animacion. Më parë i kisha secila që zgjaste 0,5 sekonda për një kohëzgjatje totale prej 2,5 sekondash. Tani le të themi se doja të shtoja një vonesë të barabartë me kohëzgjatjen totale, kështu që vonesa është 2,5 sekonda.
Koha e animacionit është 2,5 sekonda dhe vonesa është 2,5, kështu që ju e ndryshoni kohëzgjatjen në 5 sekonda. Megjithatë, meqenëse e keni dyfishuar kohëzgjatjen totale, duhet të përgjysmoni pjesën e animacionit. Shikoni këtë të fundit më poshtë. Kjo funksionoi shumë për mua.
@ -webkit-keyframes dance (0% (-webkit-transform: rrotullo (0deg); -moz-transform: rrotullo (0deg); -o-transform: rrotullo (0deg); -ms-transform: rrotullo (0deg); transformim: rrotullo (0 gradë);) 10% (-webkit-transformim: rrotullo (20 gradë); -moz-transformo: rrotullo (20 gradë); -o-transformo: rrotullo (20 gradë); -ms-transformo: rrotullo (20 gradë) ; transformim: rrotullo (20 gradë);) 20% (-webkit-transformim: rrotullo (-120 gradë); -moz-transformo: rrotullo (-120 gradë); -o-transformo: rrotullo (-120 gradë); -ms-transformo: rrotullo (-120 gradë); transformim: rrotullo (-120 gradë);) 30% (-webkit-transformo: rrotullo (0 gradë); -moz-transformo: rrotullo (0 gradë); -o-transformo: rrotullo (0 gradë); -ms -transformoj: rrotullo (0deg); transformim: rrotullo (0deg);) 40% (-webkit-transform: rrotullo (-120deg); -moz-transformo: rrotullo (-120deg); -o-transformo: rrotullo (-120deg ); -ms-transformoj: rrotullo (-120 gradë); transformim: rrotullo (-120 gradë);) 50% (-webkit-transformim: rrotullo (0 gradë); -moz-transformo: rrotullo (0 gradë); -o-transformo: rrotullim (0 gradë); -ms-transformim: rrotulloj (0 gradë); transfo rm: rrotullim (0 deg); ))
Këto janë llogaritjet tuaja që ndoshta po përdorni për të kuptuar se si të ndryshoni kohëzgjatjen e animacionit dhe% të secilës pjesë.
dëshirë_kohëzgjatja = x
dëshira_kohëzgjatja = animacioni_kohëzgjatja_pjese1 + animacioni_kohëzgjatja_pjese2 + ... (dhe kështu me radhë)
kohëzgjatja totale = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_koha
Kam bërë një poster në mur që lëviz majtas dhe djathtas në intervale. Kjo funksionon për mua:
Div-animacion (-webkit-animacion: kërcej 2000 ms lehtësim jashtë; -moz-animacion: kërcej 2000 ms lehtësim jashtë; -o-animacion: kërcej 2000 ms lehtësim jashtë; animacion: kërcej 2000 ms lehtësim-jashtë pafundësi; -neimimb; -vonesë: 2s; / * Chrome, Safari, Opera * / animacion-vonesa: 2s; origjina e transformimit: 55% 10%;) @ -webkit-kyçja e kornizave (0% (transformimi: rrotullo (0 gradë);) 3% (transformo: rrotullo (1deg);) 6% (transformo: rrotullo (2deg);) 9% (transformo: rrotullo (3deg);) 12% (transformo: rrotullo (2deg);) 15% (transformo: rrotullo (1deg) );) 18% (transformim: rrotullo (0 gradë);) 21% (transformim: rrotullo (-1 gradë);) 24% (transformim: rrotullo (-2 gradë);) 27% (transformim: rrotullo (-3 gradë);) 30% (transformim: rrotullo (-2 gradë);) 33% (transformim: rrotullo (-1 gradë);) 36% (transformim: rrotullo (0 gradë);) 100% (transformim: rrotullo (0 gradë);))
