i to je to! Da vidimo kako to izgleda u stvarnosti.

Kao prvo HTML markup... Vrlo je jednostavno jer radimo samo s jednim elementom po stranici.

1	<div class = "toSmallWidth">

A evo šta je u tablici stilova:

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 auto; /*vanjski padding vrh i dno po 20px i srednje poravnanje * / pozadina: crvena; / * crvena pozadina za blok * / visina: 100px; / * visina bloka 100px * /širina: 800px; / * početna širina 800px * /-webkit-animation-name: animWidthSitehere; -webkit-animation-duration: 5s; / * svojstvo sa prefiksom za Chrome pretraživači, Safari, Opera * / animation-name: animWidthSitehere; / * navedite naziv ključnih okvira (nalazi se ispod) * / animacija-trajanje: 5s; / * postavite trajanje animacije * / } / * ključni kadrovi sa prefiksom za pretraživače Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSitehere ( od (širina: 800px;) do (širina: 100px;)) @keyframes animWidthSitehere ( od (širina: 800px;) / * prvi ključni kadar gdje je širina bloka 800px * / do (širina: 100px;) / * posljednji ključni kadar gdje je širina bloka 100px * / }

Kao što možete vidjeti, specificirali smo samo prvi i posljednji ključni kadar, a svi srednji su "izgrađeni" automatski.

Vaša prva CSS3 animacija je spremna. Za konsolidaciju stečenog znanja - stvarajte HTML dokument i CSS fajl, i tu umetnite (a bolje ruke tip) kod iz primjera. Tada ćete sigurno sve razumjeti. Zatim pokušajte učiniti isto s visinom bloka (trebalo bi smanjiti visinu) kako biste učvrstili materijal.

3. Primjeri CSS3 animacije su složeniji

Iznad ste naučili kako je lako kreirati CSS3 animacije. Ako ste to pokušali učiniti vlastitim rukama, tada ste već razumjeli cijeli proces i sada želite znati kako možete stvoriti složeniji i predivna animacija... I zaista ga je moguće stvoriti. U nastavku se nalaze 3 lekcije u kojima se animacija kreira na isti način kao u gornjem primjeru.

3 uputstva za CSS animaciju (transformacije)

Tutorijali će vam pomoći da još bolje razumijete CSS animaciju. Glavna stvar je da pokušate ponoviti ono što vidite na 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 za UI dizajnere, a glavna prednost je što se gotovo svaka ideja može lako implementirati i implementirati bez pribjegavanja JavaScriptu.

Nevjerovatno je kako jednostavne stvari mogu oživjeti običnu web stranicu, čineći je pristupačnijom korisnicima. TO JE o CSS3 prijelazima, pomoću kojih možete dopustiti elementu da se transformira i promijeni stil, na primjer, pri lebdenju. Devet primjera CSS3 animacija dostupnih u nastavku pomoći će vam u stvaranju odzivne atmosfere na vašoj web-lokaciji i poboljšanju opšti oblik stranica zahvaljujući prekrasnim glatkim prijelazima.

Za detaljnije informacije možete preuzeti arhivu sa datotekama.

Svi efekti rade koristeći svojstvo prijelaza. tranzicija- "prijelaz", "transformacija") i pseudo-klasa: hover, koja određuje stil elementa kada pređete preko njega kursorom miša (u našem tutorijalu). Za naše primjere koristili smo div blok veličina 500 × 309 piksela, originalna boja pozadine # 6d6d6d i trajanje prijelaza iz jednog stanja u drugo 0,3 sekunde.

Body> div (širina: 500px; visina: 309px; pozadina: # 6d6d6d; -webkit-transition: sve 0.3s lakoća ;; -moz-transition: sve 0.3s lakoća ;; -o-transition: sve 0.3s lakoća ;; tranzicija: sve 0.3s lakoće;)

1. Promijenite boju pri lebdenju

Nekada je implementacija takvog efekta bila prilično mukotrpan posao, s matematičkih proračuna specifične RGB vrijednosti. Za sada je dovoljno zapisati CSS stil, u kojem trebate dodati: hover pseudo-klasu selektoru i postaviti boja pozadine, koji će glatko (za 0,3 sekunde) zamijeniti originalnu boju pozadine kada zadržite pokazivač iznad bloka:

Boja: lebdi (pozadina: # 53ea93;)

2. Izgled okvira

Zanimljiva i živopisna transformacija - unutrašnji okvir koji se glatko pojavljuje pri lebdenju mišem. Dobro za ukrašavanje raznih dugmadi. Da bismo postigli ovaj efekat, koristimo: hover pseudo-klasu i svojstvo box-shadow sa inset parametrom (postavlja senku unutar elementa). Osim toga, morat ćete postaviti rastezanje sjene (u našem slučaju to je 23px) i njenu boju:

Ivica: lebdeći (box-shadow: inset 0 0 0 23px # 53ea93;)

3. Swing

Ova CSS animacija je izuzetak jer se ovdje ne koristi svojstvo tranzicije. Umjesto toga, koristili smo:

• @keyframes je osnovna direktiva za kreiranje CSS animacija okvir po kadar koja vam omogućava da radite tzv. storyboard i opisati animaciju kao listu ključnih tačaka;
• animation i animation-iteration-count - svojstva za postavljanje parametara animacije (trajanje i brzina) i broj ciklusa (ponavljanja). U našem slučaju ponovite 1.

@ -webkit-keyframes zamah (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 zamah (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: lebdjeti (-webkit-animation: s krilo 0,6s lakoća; animacija: zamah 0,6s lakoća; -webkit-animation-iteration-count: 1; broj iteracija animacije: 1; )

4. Slabljenje

Efekat fade je u suštini jednostavna promena u transparentnosti elementa. Animacija se kreira u dvije faze: prvo morate postaviti početno stanje transparentnosti na 1 - odnosno punu neprozirnost, a zatim odrediti njenu vrijednost pri prelasku miša preko - 0,6:

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

Za suprotan rezultat, zamijenite vrijednosti:

5. Povećati

Da bi blok rastao pri lebdenju, koristit ćemo svojstvo transformacije i postaviti ga na skalu (1.2). U ovom slučaju, blok će se povećati za 20 posto uz zadržavanje svojih proporcija:

Rast: lebdenje (-webkit-transform: skala (1.2); -ms-transform: razmera (1.2); transformacija: razmera (1.2);)

6. Smanjenje

Smanjivanje elementa je jednostavno kao i povećanje veličine. Ako smo u petom paragrafu, da bismo povećali skalu, morali navesti vrijednost veću od 1, onda da bismo smanjili blok, jednostavno navedemo vrijednost koja će biti manja od jedan, na primjer, razmjer (0,7). Sada, pri lebdenju mišem, blok će se proporcionalno smanjiti za 30 posto svoje originalne veličine:

Smanjiti: lebdjeti (-webkit-transform: skala (0,7); -ms-transform: skala (0,7); transformacija: razmjer (0,7);)

7. Transformacija u krug

Jedna od najčešće korištenih animacija je pravokutni element koji se pri lebdenju pretvara u krug. Korištenje imovine CSS granica-radijus koristi se u kombinaciji sa: lebdenjem i tranzicijom, ovo se može učiniti bez problema:

Krug: lebdeći (granični radijus: 70%;)

8. Rotacija

Smiješna opcija animacije je rotiranje elementa za određeni broj stupnjeva. Za ovo će nam trebati ponovo transformisati imovinu, ali s drugom vrijednošću - rotateZ (20deg). Sa ovim parametrima, blok će se rotirati za 20 stepeni u smjeru kazaljke na satu oko Z ose:

Rotirajte: lebdite (-webkit-transform: rotateZ (20 stupnjeva); -ms-transform: rotateZ (20 stupnjeva); transformirajte: rotateZ (20 stupnjeva);)

9.3D senka

Dizajneri se ne slažu oko toga da li je ovaj efekat prikladan za ravni dizajn. Međutim, ova CSS3 animacija je vrlo originalna i također se koristi na web stranicama. Postići ćemo trodimenzionalni efekat koristeći već poznata svojstva box-shadow (kreiraćemo višeslojnu senku) i transformisati parametrom translateX (-7px) (omogućiće horizontalni pomak bloka ulijevo za 7 piksela ):

Trojno: lebdjeti (sjena okvira: 1px 1px # 53ea93, 2px 2px # 53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53ea93, 6px 6px #53ea93, 6px 6px #53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53ea93, 6px 6px #93ea93, 6px 69px #,53transform (6px 69px #, 53transform -7px); transform: translateX (-7px);)

Podrška za pretraživač

Svojstvo prijelaza trenutno podržavaju sljedeći pretraživači:

Desktop pretraživači
Internet Explorer	Podržava IE 10 i noviji
Chrome	Podržano od verzije 26 (do verzije 25 radi s -webkit- prefiksom)
Firefox	Podržano od verzije 16 (u verzijama 4-15 radi sa -moz- prefiksom)
Opera	Podržano od verzije 12.1
Safari	Podržano od verzije 6.1 (u verzijama 3.1-6 radi sa -webkit- prefiksom)

Ostala svojstva korištena u ovim primjerima, kao što su transformacija, sjena okvira, itd., također podržavaju gotovo svi. moderni pretraživači... Međutim, ako namjeravate koristiti ove ideje za svoje projekte, toplo preporučujemo da još jednom provjerite kompatibilnost između pretraživača.

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

Nedavno smo to vidjeli tranzicije je samo način animacije svojstva stila iz original prije finale države.

Dakle, prijelazi u CSS-u su specifično prema vrsti animacije, gdje je:

• postoje samo dva stanja: početak i kraj;
• animacija nije petlja;
• međustanja kontroliše samo funkcija vremena.

Ali šta ako želite:

• imati kontrolu nad srednji države?
• to loop animacija?
• uradi različite vrste animacije za jedan predmet?
• animirati samo određeno svojstvo na polovina put?
• imitirati razne funkcije vrijeme za različite nekretnine?

Animacija u CSS-u dozvoljava sve ovo, i više.

Animacija je poput mini filma, gdje vi kao režiser dajete instrukcije (pravila stila) svojim glumcima ( HTML elementi) za različite scene(ključni okviri).

Svojstva animacije

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

• animation-name: naziv animacije;
• trajanje animacije: koliko dugo animacija traje;
• funkcija vremena animacije: kako se izračunavaju srednja stanja;
• kašnjenje animacije: animacija počinje nakon nekog vremena;
• animation-iteration-count: koliko puta animacija treba biti izvršena;
• animation-direction: treba li kretanje ići u poleđina ili ne;
• animation-fill-mode: koji stilovi se primjenjuju prije početka animacije i nakon njenog završetka.

Brzi primjer

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

@keyframes odbija (0% (dole: 0; box-shadow: 0 0 5px rgba (0,0,0,0.5);) 100% (dole: 50px; box-shadow: 0 50px 50px rgba (0,0, 0,0.1;)) .dugme za učitavanje (animacija: poskakivanje 0,5s kubni-bezier (0.1,0.25,0.1,1) 0s beskonačno naizmjenično oba;)

Prvo morate napisati pravu animaciju odbijanja koristeći @keyframes i imenovati je.

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

• animation-name: odskakanje (odgovara nazivu ključnih kadrova)
• Trajanje animacije: 0,5 s (pola sekunde)
• animacija-vremenska-funkcija: cubic-bezier (0.1,0.25,0.1,1)
• kašnjenje animacije: 0s (bez kašnjenja)
• animation-iteration-count: beskonačno (beskonačno reproducirano)
• smjer animacije: naizmjenični (ide naprijed-nazad)
• animation-fill-mode: oba

@keyframes

Prije animiranja HTML elemenata, trebate pisati animaciju koristeći ključne kadrove... U principu, ključni kadrovi su svi međukorak u animaciji. Oni se određuju korištenjem postotaka:

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

Također možete koristiti ključne riječi od i do umjesto 0% i 100%, respektivno.

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

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

Da biste definirali animaciju, samo napišite ključnu riječ @keyframes sa svojim naslov:

@ključni okviri 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 4s linearno beskonačno;)

Imajte na umu da početni 0% i krajnji 100% sadrže ista pravila CSS. Ovo će osigurati savršenu petlju animacije. Pošto je brojač iteracija postavljen na beskonačan, animacija će ići od 0% do 100%, a zatim odmah nazad do 0% i tako zauvek.

naziv-animacije

Ime animacija se koristi barem dvaput:

• at pisanje animacije sa @keframes;
• at koristeći animacije koristeći svojstvo ime-animacije (ili skraćeno svojstvo animacije).

@keyframes bilo šta (/ * ... * /) .selektor (ime-animacije: bilo šta;)

Poput imena CSS klasa, imena animacija mogu uključivati ​​samo:

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

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

animacija-trajanje

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

Selektor (trajanje animacije: 0,5 s;)

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

funkcija vremena animacije

Slično funkcijama za mjerenje vremena za prijelaze, mogu se koristiti funkcije mjerenja vremena za animaciju ključne riječi kao što su linearni, ease-out, ili se mogu definirati sa proizvoljnim Bezierove krive.

Selektor (funkcija vremena animacije: jednostavno ulazak;)

Zadana postavka je lakoća.

Pošto CSS animacije koriste ključne kadrove, možete postaviti linearno funkcija vremena i simulirati specifičnu Bezierovu krivu definiranjem mnoge vrlo specifične ključni okviri. Pogledajte Bounce.js za vrhunske animacije.

animacija-kašnjenje

Kao i kod kašnjenja prijelaza, kašnjenje animacije se može postaviti na sekundi(1s) ili milisekundi(200ms).

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

Korisno kada je uključeno više animacija serije.

A, .b, .c (animacija: odskakanje 1s;) .b (kašnjenje animacije: 0,25s;) .c (kašnjenje animacije: 0,5s;)

broj iteracija animacije

Podrazumevano, animacija se reprodukuje samo jednom(vrijednost 1). Možete postaviti tri vrste vrijednosti:

• cijeli brojevi, poput 2 ili 3;
• razlomci poput 0,5, koji će reproducirati samo polovinu animacije;
• beskonačna ključna riječ, koja će ponavljati animaciju beskonačno.

.selektor (broj iteracija animacije: beskonačan;)

animation-direction

Svojstvo smjera animacije određuje kojim redosledom ključni kadrovi se čitaju.

• normalno: počinje na 0%, završava na 100%, ponovo počinje na 0%.
• obrnuto: počinje na 100%, završava na 0%, ponovo počinje sa 100%.
• alternativno: počinje sa 0%, ide na 100%, vraća se na 0%.
• alternativno-obrnuto: počinje na 100%, ide na 0%, vraća se na 100%.

Ovo je lakše zamisliti ako je broj iteracija animacije postavljen na beskonačan.

animacija-fill-mode

Svojstvo animation-fill-mode određuje šta će se dogoditi front početak animacije i poslije njegov završetak.

U određivanju ključno osoblje možete odrediti CSS pravila koji će se primijeniti u različitim koracima animacije. Sada ova CSS pravila mogu sudarati sa onima koji već primijenjen na animirane elemente.

animation-fill-mode vam omogućava da kažete pretraživaču da li stilove animacije takođe treba primijeniti izvan animacije.

Hajde da zamislimo dugme, koji je:

• crvena default;
• postaje plava na početku animacije;
• i na kraju zeleno kada je animacija završena.

Prije nego što se pojavio CSS3, riječ “animacija” bi dala hladan znoj dizajnerima izgleda. A sve zato što u to vrijeme nije bio trivijalan zadatak napraviti kvalitetnu i lijepu animaciju. CSS to nije mogao, pa su sve animacije urađene u JavaScript-u. Trebalo je prelistati gomilu foruma, pronaći iste drugove u nesreći, potrošiti dosta vremena na razvoj i na kraju čuti od dizajnera: "U redu, to je u redu." A kada je CSS3 konačno izašao, vatromet se nastavio do jutra, a šampanjac je teko kao voda. Bio je to veliki dan za sve web programere (sljedećeg dana je Microsoft najavio da će ukinuti podršku za Internet Explorer). Sa dolaskom CSS3, mnogo ranije izazovni zadaci postali su jednostavni i ugodni za rad. Isto važi i za CSS animacije, koje ću pokriti u ovom članku.

CSS tranzicije

CSS prijelazi vam omogućavaju da nesmetano i tokom vremena unosite promjene u CSS svojstva. Tako dobijate priliku da kontrolišete proces prelaska elementa iz jednog stanja u drugo. Počnimo s najjednostavnijim primjerom i idemo dalje.

Kada zadržite pokazivač iznad kvadrata, boja pozadine se glatko mijenja.

Sada pogledajmo bliže kako upravljati prijelazima u CSS-u. Naoružani smo sa samo 5 svojstava koja vam omogućavaju kontrolu animacije prijelaza:

• tranzicija-svojstvo;
• tranziciono trajanje;
• tranzicija-vremenska-funkcija;
• tranzicija-kašnjenje;
• tranzicija;

tranzicijsko svojstvo- označava listu svojstava koja će biti animirana; svojstva koja nisu ovdje navedena će se normalno mijenjati. Možete animirati sva svojstva za određeni element navođenjem vrijednosti all. Ako niste naveli nijedno svojstvo, onda je zadana postavka sve.

Prijelazno svojstvo: širina;

tranziciono trajanje- postavlja trajanje animacije, vrijeme se može odrediti u sekundama ili milisekundama.

Trajanje tranzicije: 1s;

prijelazno-vremenska-funkcija- vremenska funkcija, označava tačke ubrzanja i usporavanja za određenom periodu vrijeme za kontrolu promjene brzine animacije. Jednostavno rečeno, možete koristiti ovo svojstvo da odredite ponašanje za animaciju. Na primjer, možemo ubrzati animaciju na početku i usporiti na kraju, ili obrnuto. Bezierove krive se koriste za definiranje procesa animacije. Općenito, funkcija prijelaznog vremena vam omogućava da napravite mnogo različitih ponašanja za animacije, ovo je cijela tema za članak, tako da ovdje nećemo ići dublje.

Funkcija vremena tranzicije: kubni-bezier (0, 0, 1, 1);

tranzicija-kašnjenje- postavlja vremensko kašnjenje prije početka animacije, možete ga odrediti u sekundama ili milisekundama.

Prijelazno kašnjenje: 500ms;

tranzicija- ovo je zajedničko vlasništvo, što vam omogućava da navedete prva četiri svojstva po redu: svojstvo, trajanje, funkcija vremena, kašnjenje.

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

Imamo ovo jednostavna animacija: kada pređete mišem preko kvadrata, širina se mijenja; trajanje animacije je jedna sekunda; igra se animacija linearna funkcija; kašnjenje prije početka animacije 500 milisekundi.

WITH koristeći CSS prijelazi mogu animirati gotovo sva svojstva i stvoriti mnoge zanimljive, lijepe, funkcionalne, pa čak i složene animacije koje će upotpuniti i poboljšati vaš projekt. Na primjer, napravio sam materijal-FAB ​​kao što je ovaj čisti CSS koristeći prelaze:

CSS animacije

CSS animacije dozvoljavaju složenije animacije od CSS prijelaza. Cijela tajna je u @keyframes. Pravilo @keyframes vam omogućava da kreirate animaciju koristeći skup ključnih kadrova, odnosno opisuje stanje objekta u određenom trenutku. Pogledajmo jednostavan primjer.

Naš krug je oživio i čini se da pulsira.

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

• naziv-animacije;
• animacija-trajanje;
• animacija-vremenska-funkcija;
• animacija-kašnjenje;
• animacija-iteracija-broj;
• animacija-režija;
• animacija-play-stanje;
• animacija-fill-mode;
• animacija;

naziv-animacije- ovo je naziv animacije koja veže pravilo @keyframes za selektor.

Animation-name: my-animation; @keyframes moja-animacija (0% (prozirnost: 0;) 100% (prozirnost: 1;))

broj iteracija animacije- postavlja broj ponavljanja animacije, zadana vrijednost je 1. Beskonačna vrijednost znači da će se animacija reproducirati neograničeno.

Broj iteracija animacije: 2;

animation-direction- postavlja smjer animacije.

Smjer animacije: obrnuto;

animacija-play-stanje - ove nekretnine kontroliše zaustavljanje i reprodukciju animacije. Postoje dvije vrijednosti, run (animacija se reprodukuje, podrazumevano) i paused (zaustavlja animaciju).

Animation-play-state: pauzirano;

animacija-fill-mode- postavlja koja će CSS svojstva biti primijenjena na objekt prije ili nakon animacije. Može poprimiti sljedeće vrijednosti:

• none - animirana CSS svojstva će biti primijenjena na objekt samo tokom reprodukcije animacije, po završetku objekt se vraća u prvobitno stanje;
• naprijed - animirana CSS svojstva će se primijeniti na objekt kada se animacija završi.
• unazad - animirana CSS svojstva će se primijeniti na objekt prije nego što animacija počne da se reprodukuje.
• oba - animirana CSS svojstva će biti primijenjena na objekt i prije i nakon reproduciranja animacije;

Animation-fill-mode: unatrag;

Svojstva animacija-trajanje, funkcija vremena animacije, animacija-kašnjenje rade na isti način kao slična svojstva u CSS tranzicijama, o kojima sam pisao ranije, pa se neću ponavljati.

Sa CSS animacijama možete kreirati prilično složene animacije bez njih 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

Modul Motion Path Module CSS vam omogućava da kreirate kretanje objekata duž putanje kroz posebno svojstvo motion-path. Ranije se ova animacija mogla raditi samo sa koristeći SVG ili složene skripte.

Ova specifikacija ima 3 svojstva:

• motion-path;
• motion-offset;
• pokret-rotacija;

putanja kretanja- ovo svojstvo vam omogućava da odredite tačke (koordinate) duž kojih će se objekat kretati. Sintaksa je ista kao SVG atribut putanje.

Putanja kretanja: putanja ("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");

motion-offset- ovo svojstvo postavlja objekat u pokret od početne do krajnje tačke. Potrebna je ili dvostruka dužina ili postotak. Da bi se objekt počeo kretati, morate definirati animaciju koja će ići od 0 do 100%.

@keyframes avion-fly (0% (pomak-pomak: 0;) 100% (pomak-pomak: 100%;))

pokret-rotacija- ovo svojstvo vam omogućava da odredite na koju stranu će se objekt pomaknuti naprijed. Možete odrediti auto, reverse ili vlastitu vrijednost u stepenima ("-45deg", "30deg", itd.).

Motion-rotation: auto;

Nažalost, motion-path je trenutno podržan samo u Chromeu i Operi, ali nadajmo se da će i drugi pretraživači uskoro slijediti njihov primjer, jer je stvar zaista korisna.

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

Sve više na mnogima landing page ili promo stranice, možete pronaći razne efekte animacija. Na kraju krajeva, čine stranicu zanimljivijom i atraktivnijom.

U osnovi, ovi efekti se postavljaju ili na neki događaj (klikanje ili prelazak preko elementa), ili u trenutku pomicanja stranice. Mislim da ste vidjeli ovakve stranice kada ste skrolovali kroz stranicu, razni elementi izgledaju glatko i lijepo.

Ranije ste za implementaciju ovih efekata morali koristiti samo JS, ali razvoj ne miruje, a izdavanjem CSS3 svi ovi efekti se mogu implementirati na njega.

V ovu lekciju upoznaćemo veoma zanimljiv alat koji se zove animate.css... Ovo je već završio CSS style sheet, koji u svom arsenalu ima preko 50 različitih efekata, a svi ovi efekti su implementirani u CSS3.

Da biste ga koristili, samo trebate podesiti za traženi element određenu klasu i efekat animacije će se primijeniti na ovaj element. Kao što sam ranije rekao, ova animacija je implementirana u CSS3, tako da će ovi efekti raditi u svim modernim pretraživačima.

Sada pogledajmo izbliza animate.css.

Osnovne HTML oznake

Pogledajte video tutorijal

• bounce
• blic
• puls
• gumica
• tresti
• swing
• kolebati se
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight
• šarka
• rollIn
• rollOut
• priblizi
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

Beskrajna animacija

Ako ste uradili sve kako je gore opisano, tada će se u trenutku učitavanja stranice ovaj efekat primijeniti na element i to je to, animacija će se tu završiti.

Ali što ako želite da se animacija nastavi bez zaustavljanja?

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

Naslov

Postavite animaciju kada lebdite iznad elementa

Pogledajte video tutorijal

Svi prethodno opisani primjeri postavljaju animaciju odmah nakon učitavanja stranice, ali u praksi je to rijetko potrebno. U praksi je vrlo često potrebno podesiti animaciju kada se lebdi iznad elementa, pa sam to naveo u nastavku spreman kod ovu implementaciju.

Html

Html naša oznaka se malo promijenila, sada ne trebamo postavljati klasu koja je odgovorna za određenu animaciju. Moramo navesti ovu vrijednost u poseban atribut data-effect... Obratite pažnju na ovo, ovo je veoma važno.

Naslov

Evo malog koda za jQuery koji će pratiti događaj prelaska miša preko elementa iu slučaju pojave ovaj događaj, skripta će joj dodati klasu čija je vrijednost zapisana u atributu data-effect... Dodavanjem ove klase, animacija će se primijeniti.

Funkcija animirati (elem) (var effect = elem.data ("efekat"); if (! Effect || elem.hasClass (effect)) vrati false; elem.addClass (efekt); setTimeout (function () (elem.removeClass) (efekat);), 1000);) $ (". animirani"). mouseenter (funkcija () (animiraj ($ (ovo));));

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

Pravljenje animacije prilikom pomicanja po stranici

Pogledajte video tutorijal

I na kraju, pogledajmo još jedan primjer na koji se lako možete primijeniti animate.css.

Naime, možete postaviti različite efekte za elemente prilikom pomicanja po stranici. U ove svrhe, pored animate.css, treba nam više posebna skripta wow.js.