i to je to! Pogledajmo kako to izgleda u stvarnosti.

Isprva HTML označavanje. Vrlo je jednostavno jer radimo samo s jednim elementom po stranici.

1	<div class = "toSmallWidth" >

A evo što je u datoteci stila:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (margina: 20px automatski; /*margine gore i dolje 20 px i poravnato u sredini*/ pozadina:crvena; /*crvena pozadina bloka*/ visina: 100px; /*visina bloka 100px*/širina: 800px; /*početna širina 800px*/-webkit-animation-name : animWidthSitehere; -webkit-animation-duration : 5s; /* svojstvo s prefiksom za Chrome preglednici, Safari, Opera */ ime-animacije : animWidthSitehere; /* navedite naziv ključnih okvira (nalaze se ispod)*/ animacija-trajanje: 5s; /*postavljanje trajanja animacije*/ } /* ključni okviri s prefiksom za preglednike Chrome, Safari, Opera */ @-webkit-keyframes animWidthSiteovdje ( od (širina: 800px;) do (širina: 100px;)) @keyframes animWidthSiteovdje ( od (širina: 800px;) /*prvi ključni kadar gdje je širina bloka 800px*/ do (širina: 100 px;) /*zadnji ključni kadar, gdje je širina bloka 100px*/ }

Kao što možete vidjeti, naveli smo samo prvi i zadnji ključni okvir, a svi posredni su "sagrađeni" automatski.

Vaša prva CSS3 animacija je spremna. Da biste učvrstili stečeno znanje, stvarajte HTML dokument I CSS datoteka, i umetnite tamo (a bolje rukama print) kôd iz primjera. Tada ćete sigurno sve razumjeti. Zatim pokušajte isto s visinom bloka (trebao bi se smanjiti u visini) kako biste osigurali materijal.

3. Složeniji primjeri CSS3 animacija

Gore ste naučili kako jednostavno izraditi CSS3 animaciju. Ako ste to pokušali učiniti vlastitim rukama, onda ste već razumjeli cijeli proces i sada želite saznati kako možete stvoriti složeniji i prekrasna animacija. I doista ga je moguće stvoriti. Ispod se nalaze 3 lekcije u kojima se animacija stvara na isti način kao u gornjem primjeru.

3 lekcije o CSS animaciji (transformacije)

Lekcije će vam pomoći da još bolje razumijete CSS animaciju. Glavna stvar je pokušati ponoviti ono što vidite u lekcijama. Ili barem pokušajte promijeniti vrijednosti svojstava i vidjeti što će se dogoditi, tada ćete se manje bojati CSS-a.

| 18.02.2016

CSS3 otvara neograničene mogućnosti dizajnerima korisničkog sučelja, a glavna prednost je što se gotovo svaka ideja može lako implementirati i oživjeti bez pribjegavanja korištenju JavaScripta.

Nevjerojatno je kako jednostavne stvari mogu oživjeti običnu web stranicu i učiniti je pristupačnijom korisnicima. Riječ je o o CSS3 prijelazima, koji se mogu koristiti da se elementu omogući transformacija i promjena stila, na primjer, pri lebdenju. Devet primjera CSS3 animacija dostupnih u nastavku pomoći će vam stvoriti responzivnu atmosferu na vašoj web-lokaciji, kao i poboljšati opći oblik stranice zahvaljujući prekrasnim glatkim prijelazima.

Za detaljnije informacije možete preuzeti arhivu s datotekama.

Svi efekti rade pomoću svojstva prijelaza. tranzicija- “prijelaz”, “transformacija”) i pseudo-class:hover, koji određuje stil elementa kada kursor miša lebdi iznad njega (u našem vodiču). Za naše primjere koje smo koristili div blok Veličina 500x309 piksela, početna boja pozadine #6d6d6d i trajanje prijelaza iz jednog stanja u drugo 0,3 sekunde.

Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; prijelaz: svih 0,3 s lakoća )

1. Promijenite boju dok lebdite

Jednom davno, implementacija takvog učinka bila je prilično mukotrpan posao, sa matematički proračuni određene RGB vrijednosti. Za sada je dovoljno zapisati CSS stil, u kojem selektoru treba dodati pseudo-class:hover i postaviti boja pozadine, koji će glatko (u 0,3 sekunde) zamijeniti izvornu boju pozadine kada prijeđete pokazivačem iznad bloka:

Boja: lebdite (pozadina:#53ea93;)

2. Izgled okvira

Zanimljiva i upečatljiva transformacija je unutarnji okvir koji se glatko pojavljuje kada lebdite mišem. Pogodan za ukrašavanje raznih gumba. Da bismo postigli ovaj učinak, koristimo pseudo-class:hover i svojstvo box-shadow s parametrom inset (postavlja sjenu unutar elementa). Osim toga, morat ćete postaviti rastezanje sjene (u našem slučaju to je 23px) i njezinu boju:

Obrub: lebdjeti ( okvir-sjena: umetnuti 0 0 0 23px #53ea93; )

3. Zamah

Ova CSS animacija je iznimka jer se svojstvo prijelaza ovdje ne koristi. Umjesto toga koristili smo:

• @keyframes je osnovna direktiva za kreiranje frame-by-frame CSS animacije, koja vam omogućuje da radite tzv. scenarij i opišite animaciju kao popis ključnih točaka;
• animation i animation-iteration-count - svojstva za postavljanje parametara animacije (trajanje i brzina) i broja ciklusa (ponavljanja). U našem slučaju ponovite 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX( 9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform : translateX (6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100 % ( -webkit-transform: translateX(0); transform: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s ease; animacija: zamah 0,6s lakoća; -webkit-animation-iteration-count: 1; broj ponavljanja animacije: 1; )

4. Prigušenje

Efekt blijeđenja je u biti jednostavna promjena prozirnosti elementa. Animacija se izrađuje u dvije faze: prvo je potrebno postaviti početno stanje prozirnosti na 1 - odnosno potpunu neprozirnost, a zatim odrediti njezinu vrijednost kada lebdite mišem - 0,6:

Fade (prozirnost: 1;) .fade:hover (prozirnost: 0,6;)

Za suprotan rezultat zamijenite vrijednosti:

5. Povećanje

Kako bismo povećali blok kada prijeđemo pokazivačem, koristit ćemo svojstvo transform i postaviti ga na scale(1.2). U ovom slučaju blok će se povećati za 20 posto uz zadržavanje svojih proporcija:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Smanjenje

Smanjenje elementa jednako je jednostavno kao i povećanje. Ako smo u petoj točki za povećanje ljestvice trebali navesti vrijednost veću od 1, tada ćemo za smanjenje bloka jednostavno navesti vrijednost koja će biti manja od 1, na primjer, ljestvica(0,7) . Sada, kada lebdite mišem, blok će se proporcionalno smanjiti za 30 posto svoje izvorne veličine:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Transformacija u krug

Jedna od često korištenih animacija je pravokutni element koji se pretvara u krug kada prijeđete iznad njega. Korištenje imovine CSS radijus granice, koji se koristi zajedno s :hover i conversion , ovo se može implementirati bez problema:

Krug: lebdi ( radijus granice: 70%; )

8. Rotacija

Zabavna opcija animacije je rotiranje elementa za određeni broj stupnjeva. Za ovo nam opet treba transformirati vlasništvo, ali s drugom vrijednošću - rotateZ(20deg) . S ovim parametrima, blok će se zakrenuti za 20 stupnjeva u smjeru kazaljke na satu u odnosu na Z os:

Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D sjena

Mišljenja dizajnera razlikuju se oko toga je li ovaj efekt prikladan u ravnom dizajnu. Međutim, ova CSS3 animacija je prilično originalna i također se koristi na web stranicama. Postići ćemo trodimenzionalni efekt korištenjem već poznatih svojstava box-shadow (stvorit ćemo višeslojnu sjenu) i transformirati s parametrom translateX(-7px) (osigurat ćemo horizontalni pomak bloka ulijevo za 7 piksela ):

Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX( -7px); transformacija: translateX(-7px)

Podrška za preglednik

Sljedeći preglednici trenutno podržavaju svojstvo prijelaza:

Preglednici stolnih računala
Internet Explorer	Podržava IE 10 i noviji
Krom	Podržano od verzije 26 (sve dok verzija 25 ne radi s prefiksom -webkit-)
Firefox	Podržano od verzije 16 (u verzijama 4-15 radi s prefiksom -moz-)
Opera	Podržano od verzije 12.1
Safari	Podržano od verzije 6.1 (u verzijama 3.1-6 radi s prefiksom -webkit-)

Ostatak svojstava korištenih u ovim primjerima, kao što su transform, box-shadow itd., također podržavaju gotovo svi moderni preglednici. Međutim, ako namjeravate koristiti ove ideje za svoje projekte, toplo preporučujemo da još jednom provjerite kompatibilnost s više preglednika.

Nadamo se da su vam ovi primjeri CSS3 animacije bili od pomoći. Želimo vam kreativni uspjeh!

Nedavno smo to vidjeli prijelazi- to je samo način animacije svojstva stila iz izvornik prije konačni stanje.

Dakle prijelazi u CSS-u su specifično vrsta animacije, gdje:

• postoje samo dva stanja: početak i kraj;
• animacija se ne ponavlja;
• međustanja kontrolira samo funkcija vremena.

Ali što ako želite:

• imati kontrolu nad srednji Države?
• petlja animacija?
• čini različiti tipovi animacije za jedan element?
• animirati određeno svojstvo samo na pola načine?
• oponašati razne funkcije vrijeme za različita svojstva?

Animacija u CSS-u omogućuje vam sve to i više.

Animacija je poput mini-filma, gdje vi kao redatelj dajete upute (pravila stila) svojim glumcima ( HTML elementi) Za različite scene(ključni okviri).

Svojstva animacije

Kao i prijelaz, svojstvo animacije je skraćeno za nekoliko drugih:

• ime-animacije : ime animacije;
• animation-duration : koliko dugo traje animacija;
• animation-timing-function : kako se izračunavaju međustanja;
• animation-delay : animacija počinje nakon nekog vremena;
• animation-iteration-count : koliko puta animacija treba biti izvedena;
• animation-direction : treba li kretanje ući obrnuta strana ili ne;
• animation-fill-mode : koji se stilovi primjenjuju prije početka i nakon što animacija završi.

Brzi primjer

Da biste animirali gumb za preuzimanje, možete napisati animaciju poskakivanje:

@keyframes bouncing( 0% ( bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% ( bottom: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1); .loading-button ( animacija: poskakivanje 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s beskonačno oboje;)

Najprije trebate napisati stvarnu animaciju poskakivanja koristeći @keyframes i nazvati je.

Koristio sam skraćeno svojstvo animacije i uključuje sve moguće opcije:

• ime-animacije: poskakivanje (isto kao naziv ključne slike)
• trajanje animacije: 0,5 s (pola sekunde)
• funkcija-vremena-animacije: cubic-bezier(0.1,0.25,0.1,1)
• kašnjenje animacije: 0 s (bez kašnjenja)
• animation-iteration-count: beskonačno (reproducira se bez kraja)
• animation-direction: naizmjenično (ide naprijed-natrag)
• animation-fill-mode: oboje

@ključni okviri

Prije primjene animacije na HTML elemente trebate napišite animaciju koristeći ključne kadrove. Općenito, ključni okviri su svaki međukorak u animaciji. Oni se određuju pomoću postotaka:

• 0% - prvi korak animacije;
• 50% je pola koraka u animaciji;
• 100% je posljednji korak.

Također se može koristiti ključne riječi od i do umjesto 0% odnosno 100%.

Možete definirati onoliko ključnih kadrova koliko želite, primjerice 33%, 4% ili čak 29,86%. U praksi ćete napisati samo neke od njih.

Svaki ključni okvir je CSS pravilo , to znači da možete pisati CSS svojstva kao i obično.

Da biste definirali animaciju, jednostavno uz nju napišite ključnu riječ @keyframes Ime:

@keyframes oko ( 0% ( lijevo: 0; gore: 0; ) 25% ( lijevo: 240px; gore: 0; ) 50% ( lijevo: 240px; gore: 140px; ) 75% ( lijevo: 0; gore: 140px ; ) 100% ( lijevo: 0; gore: 0; ) ) p ( animacija: oko 4 s linearno beskonačno; )

Imajte na umu da početak 0% i kraj 100% sadrže ista pravila CSS. To osigurava da se animacija savršeno ponavlja. Budući da je brojač ponavljanja postavljen na beskonačno, animacija će ići od 0% do 100%, a zatim odmah leđa na 0% i tako unedogled.

ime-animacije

Ime animacija se koristi najmanje dvaput:

• na pisanje animacije pomoću @keframes ;
• na koristiti animacija koristeći svojstvo animation-name (ili svojstvo skraćenog zapisa animacije).

@keyframes što god ( /* ... */ ) .selektor (naziv-animacije: što god; )

Slično nazivima CSS klasa, naziv animacije može uključivati ​​samo:

• slova (a-z);
• brojevi (0-9);
• podvlaka(_);
• crtica (-).

Ime ne može započeti brojem ili dvije crtice.

animacija-trajanje

Poput trajanja prijelaza, trajanje animacije može se postaviti na sekundi(1s) ili milisekundi(200 ms).

Selektor (trajanje animacije: 0,5 s;)

Zadana vrijednost je 0 s, što znači da uopće nema animacije.

funkcija mjerenja vremena animacije

Slično funkcijama za mjerenje vremena prijelaza, funkcije za mjerenje vremena animacije mogu koristiti ključne riječi, kao što su linearni , ease-out ili se mogu definirati pomoću proizvoljnih Bezierove krivulje.

Odabir (funkcija-vremena-animacije: lagano ulaženje; )

Zadana vrijednost: lakoća.

Budući da animacija u CSS-u koristi ključne kadrove, možete postaviti linearni funkcija vremena i simulirati specifična Bezierova krivulja definiranjem mnogi vrlo specifični ključni okviri. Provjerite Bounce.js za naprednu animaciju.

animacija-odgoda

Kao i kod odgode prijelaza, odgoda animacije može se postaviti na sekundi(1s) ili milisekundi(200 ms).

Zadana vrijednost je 0 s, što znači da nema kašnjenja bilo koje vrste.

Korisno kada uključujete više animacija niz.

A, .b, .c ( animacija: poskakivanje 1 s; ) .b ( odgoda animacije: 0,25 s; ) .c ( odgoda animacije: 0,5 s; )

brojanje ponavljanja animacije

Prema zadanim postavkama reproducira se samo animacija jednom(vrijednost 1). Možete postaviti tri vrste vrijednosti:

• cijeli brojevi, poput 2 ili 3;
• frakcijski brojevi poput 0,5, koji će reproducirati samo pola animacije;
• ključna riječ infinite, koja će beskrajno ponavljati animaciju.

.selector ( animation-iteration-count: infinite; )

animacija-režija

Svojstvo animation-direction navodi hoće li kojim redom očitavaju se ključni okviri.

• normalno : počinje na 0%, završava na 100%, ponovno počinje na 0%.
• obrnuti : počinje na 100%, završava na 0%, ponovno počinje na 100%.
• alternativno : počinje od 0%, ide do 100%, vraća se do 0%.
• alternate-reverse : počinje od 100%, ide na 0%, vraća se na 100%.

Ovo je lakše zamisliti ako je broj ponavljanja animacije postavljen na beskonačno.

animation-fill-mode

Svojstvo animation-fill-mode određuje što će se dogoditi prije početak animacije i nakon njegovo dovršenje.

Prilikom utvrđivanja ključni okviri može se specificirati CSS pravila, koji će se primijeniti na različite korake animacije. Sada ova CSS pravila mogu sudarati se s onima koji već primijenjeno na animirane elemente.

animation-fill-mode vam omogućuje da pregledniku kažete ako stilovi animacije Također mora se primijeniti izvan animacije.

Zamislimo se dugme, koji je:

• Crvena zadano;
• postaje plava na početku animacije;
• i na kraju zelena kada je animacija gotova.

Prije pojave CSS3, riječ "animacija" tjerala je dizajnere izgleda da oblije hladan znoj. A sve zato što u to vrijeme napraviti kvalitetnu i lijepu animaciju nije bio trivijalan zadatak. CSS to nije mogao učiniti, pa su sve animacije napravljene u JavaScriptu. Bilo je potrebno pretražiti hrpu foruma, pronaći iste drugove u nesreći, potrošiti puno vremena na razvoj i na kraju čuti od dizajnera: "U redu, ovo će poslužiti." A kad je CSS3 konačno izašao, vatromet nije prestajao do jutra, a šampanjac je tekao rijekom. Bio je to sjajan dan za sve web programere (sljedeći takav dan je bio kada je Microsoft najavio kraj podrške za Internet Explorer). S pojavom CSS3, mnogo ranije složeni zadaci postali su jednostavni i ugodni za rad. Isto vrijedi i za animacije u CSS-u, o čemu ću govoriti u ovom članku.

CSS prijelazi

CSS prijelazi omogućuju vam da mijenjate CSS svojstva glatko i tijekom vremena. Na taj način dobivate priliku kontrolirati proces prijelaza elementa iz jednog stanja u drugo. Počnimo s najjednostavnijim primjerom i krenimo dalje.

Kada pokazivač postavite iznad kvadrata, boja pozadine se glatko mijenja.

Pogledajmo sada pobliže kako upravljati prijelazima u CSS-u. Imamo samo 5 svojstava koja nam omogućuju kontrolu animacije prijelaza:

• prijelaz-imovina;
• prijelaz-trajanje;
• prijelazna-vremenska-funkcija;
• prijelaz-kašnjenje;
• tranzicija;

tranzicijsko svojstvo- navodi popis svojstava koja će biti animirana; svojstva koja ovdje nisu navedena bit će izmijenjena kao i obično. Možete animirati sva svojstva za određeni element navođenjem vrijednosti all. Ako ne navedete nijedno svojstvo, zadana vrijednost je sve.

Prijelaz-svojstvo: širina;

tranzicija-trajanje- postavlja trajanje animacije u sekundama ili milisekundama.

Prijelaz-trajanje: 1s;

funkcija prijelaznog vremena- funkcija vremena, označava točke ubrzanja i usporavanja za određeno razdoblje vremena za kontrolu promjena u brzini animacije. Jednostavno rečeno, ovo svojstvo možete koristiti za određivanje ponašanja animacije. Na primjer, možemo ubrzati animaciju na početku i usporiti je na kraju ili obrnuto. Za definiranje procesa animacije koriste se Bezierove krivulje. Općenito, funkcija prijelaznog vremena omogućuje vam stvaranje mnogo različitih ponašanja za animacije, ovo je cijela tema za članak, stoga nećemo dublje ulaziti ovdje.

Funkcija-vremena-prijelaza: cubic-bezier(0, 0, 1, 1);

prijelaz-kašnjenje- postavlja vremensku odgodu prije početka animacije, može se odrediti u sekundama ili milisekundama.

Prijelaz-kašnjenje: 500ms;

tranzicija- Ovo opća svojina, koji vam omogućuje da navedete prva četiri svojstva redom: svojstvo, trajanje, vremenska funkcija, kašnjenje.

Prijelaz: boja pozadine 1s cubic-bezier(0, 0, 1, 1) 500ms;

Ovo je ono što imamo jednostavna animacija: kada prijeđete mišem preko kvadrata, mijenja se širina; trajanje animacije je jedna sekunda; animacija se nastavlja linearna funkcija; odgoda prije početka animacije 500 milisekundi.

S koristeći CSS prijelazi mogu animirati gotovo sva svojstva i stvoriti mnoge zanimljive, lijepe, funkcionalne pa čak i složene animacije koje će nadopuniti i poboljšati vaš projekt. Na primjer, napravio sam ovaj Material-FAB ​​​​on čisti CSS pomoću prijelaza:

CSS animacije

CSS animacije omogućuju stvaranje složenijih animacija od CSS prijelaza. Cijela tajna je u @keyframes. Pravilo @keyframes omogućuje stvaranje animacije pomoću skupa ključnih okvira, odnosno opisuje stanje objekta u određenom trenutku. Pogledajmo jednostavan primjer.

Naš krug je oživio i kao da pulsira.

Postoji 9 svojstava koja vam omogućuju kontrolu CSS animacija:

• ime-animacije;
• animacija-trajanje;
• funkcija mjerenja vremena animacije;
• animacija-kašnjenje;
• broj ponavljanja animacije;
• animacija-režija;
• animacija-play-state;
• animacija-fill-mode;
• animacija;

ime-animacije- ovdje je naziv animacije koja povezuje pravilo @keyframes sa selektorom.

Ime-animacije: moja-animacija; @keyframes moja-animacija ( 0% ( neprozirnost: 0; ) 100% ( neprozirnost: 1; ) )

brojanje ponavljanja animacije- postavlja broj ponavljanja animacije, zadana vrijednost je 1. Vrijednost beskonačno znači da će se animacija reproducirati bez kraja.

Broj ponavljanja animacije: 2;

animacija-režija- postavlja smjer animacije.

Animacija-režija: obrnuto;

animacija-play-state - ovo svojstvo kontrolira zaustavljanje i reprodukciju animacije. Postoje dvije vrijednosti, pokrenuto (animacija se reproducira, prema zadanim postavkama) i pauzirano (zaustavlja animaciju).

Stanje reprodukcije animacije: pauzirano;

animation-fill-mode- postavlja koja će se CSS svojstva primijeniti na objekt prije ili poslije animacije. Može uzeti sljedeće vrijednosti:

• ništa - animirana CSS svojstva će se primijeniti na objekt samo dok se animacija reproducira, a po završetku objekt će se vratiti u prvobitno stanje;
• naprijed - animirana CSS svojstva će se primijeniti na objekt nakon završetka reprodukcije animacije;
• unatrag - animirana CSS svojstva primijenit će se na objekt prije nego što se animacija počne reproducirati;
• oboje - animirana CSS svojstva primjenjivat će se na objekt i prije i nakon završetka animacije;

Animation-fill-mode: unatrag;

Svojstva animacija-trajanje, funkcija mjerenja vremena animacije, animacija-odgoda Oni rade na isti način kao slična svojstva u CSS prijelazima, o kojima sam ranije pisao, pa ih neću ponavljati.

S CSS animacijama možete stvoriti prilično složene animacije bez koristeći JavaScript. Upečatljiv primjer su loaderi, odnosno elementi koji pokazuju da se nešto učitava na vašoj stranici. Evo nekoliko primjera:

Modul putanje kretanja

Motion Path Module CSS omogućuje stvaranje kretanja objekata duž putanje kroz posebno svojstvo motion-path. Prije se takva animacija mogla raditi samo s koristeći SVG ili složene skripte.

Ova specifikacija ima 3 svojstva:

• staza gibanja;
• pomak kretanja;
• gibanje-rotacija;

staza kretanja- ovo svojstvo omogućuje određivanje točaka (koordinata) duž kojih će se objekt kretati. Sintaksa je ista kao SVG atribut staze.

Staza kretanja: staza ("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

pomak kretanja- ovo svojstvo pokreće objekt od početne do krajnje točke. Prihvaća dvostruku duljinu ili postotak. Da bi se objekt počeo kretati potrebno je definirati animaciju koja će ići od 0 do 100%.

@keyframes airplane-fly ( 0% (motion-offset: 0; ) 100% (motion-offset: 100%; ) )

kretanje-rotacija- ovo svojstvo vam omogućuje da odredite na koju će se stranu naprijed objekt pomaknuti. Možete odrediti automatsku, obrnutu ili vlastitu vrijednost u stupnjevima ("-45deg", "30deg" itd.).

Kretanje-rotacija: auto;

Nažalost, motion-path je trenutno podržan samo u Chromeu i Operi, no nadajmo se da će i drugi preglednici uskoro slijediti njihov primjer jer je stvar stvarno korisna.

Za one koji još nisu razumjeli kako ovo funkcionira, ili žele bolje razumjeti, napravio sam primjer (link na codeopen).

Sve više na mnogima odredišna stranica ili promotivne stranice, možete pronaći razne efekte animacije. Uostalom, oni stranicu čine zanimljivijom i privlačnijom.

Uglavnom, ovi efekti se postavljaju ili na neki događaj (klik ili lebdjenje na element), ili u trenutku listanja stranice. Mislim da ste naišli na takve web-lokacije kada, dok listate stranicu, raznih elemenata pojavljuju se glatko i lijepo.

Ranije ste za implementaciju ovih efekata morali koristiti samo JS, ali razvoj ne stoji mirno i s izdavanjem CSS3 svi ti efekti mogu se implementirati na njega.

U ovu lekciju Upoznat ćemo vas s vrlo zanimljivim alatom tzv animirati.css. Već je spreman CSS stilski list koji ima više od 50 različitih efekata u svom arsenalu i svi su ti efekti implementirani u CSS3.

Da biste ga koristili, samo trebate postaviti za traženi element određena klasa a na ovaj element primijenit će se efekt animacije. Kao što sam ranije rekao, ova animacija je implementirana u CSS3, tako da će ovi efekti raditi u svim modernim preglednicima.

Sada pogledajmo pobliže animirati.css.

Osnovno HTML označavanje

Pogledajte video tutorial

• odskakivati
• bljesak
• puls
• gumica
• tresti
• zamahnuti
• klimati se
• odskočiti
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• odskočiti
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• nestati u
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• izblijediti
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• FlipOutY
• LightSpeedIn
• lightSpeedOut
• rotiratiIn
• rotirajDoljeLijevo
• rotiratiDoljeDesno
• zakreniugorelijevo
• rotirajUGoreDesno
• rotiratiVan
• rotiratiNadoljeUlijevo
• rotiratiOutDownRight
• rotirajNagoreUlijevo
• rotiratiNagoreDesno
• šarka
• rollIn
• rollOut
• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• smanji
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

Beskrajna animacija

Ako ste učinili sve kako je gore opisano, onda kada se stranica učita, ovaj efekt će se primijeniti na element i to je to, animacija će tu završiti.

Ali što ako trebate da se animacija nastavi bez zaustavljanja?

Da biste to učinili, samo dodajte još jednu klasu za naš animirani element. Ovo je razred - beskonačan.

Naslov

Postavite animaciju kada prijeđete mišem preko elementa

Pogledajte video tutorial

Svi prethodno opisani primjeri postavljaju animaciju odmah nakon učitavanja stranice, no u praksi je to rijetko potrebno. U praksi je vrlo često potrebno postaviti animaciju kada lebdite iznad elementa, pa sam stoga u nastavku dao spreman kod ova implementacija.

HTML

HTML Naše oznake su se malo promijenile, sada ne moramo specificirati klasu koja je odgovorna za određenu animaciju. Moramo naznačiti ovu vrijednost u poseban atribut data-efekt. Molimo obratite pozornost na ovo, vrlo je važno.

Naslov

Evo malog koda za jQuery, koji će pratiti događaj prelaska mišem na element i ako se dogodi ovog događaja, skripta će mu dodati klasu čija je vrijednost navedena u atributu data-efekt. Dodavanjem ove klase primijenit će se animacija.

Funkcija animate(elem)( var effect = elem.data("effect"); if(!effect || elem.hasClass(effect)) return false; elem.addClass(effect); setTimeout(function())( elem. removeClass (efekt); 1000);

Naravno, ovu skriptu možete promijeniti kako želite, na primjer, možete promijeniti događaj u njoj mouseenter na klik. Tada se u ovom slučaju animacija neće pojaviti u trenutku kada miš lebdi iznad elementa, već u trenutku klika.

Izrada animacije prilikom listanja stranice

Pogledajte video tutorial

I na kraju, pogledajmo još jedan primjer koji možete lako koristiti animirati.css.

Naime, možete postaviti različite efekte za elemente prilikom skrolanja po stranici. U ove svrhe, pored animirati.css, trebat će nam još posebna skripta wow.js.