Css3 primjeri animacije. Dvostruki animirani prsten

Pozdrav svima. Nedavno sam naišao na niz vrlo korisnih i zanimljivih video tutorijala na temu “ CSS animacija". Ali to je loša sreća, svi videi su bili uključeni Engleski jezik, i, vjerojatno, ne zna svaki dizajner izgleda engleski na dovoljnoj razini da razumije i svlada cjelinu potrebne informacije... Stoga sam odlučio prevesti ove lekcije za vas (ili bolje rečeno, napraviti besplatan prijevod). Ne treba zahvaljivati. Tako:

1. CSS animacija. Uvod + prijelazno svojstvo(Ovaj članak)
2. CSS animacija. Ključni okviri - uskoro
3. Kada i zašto koristiti CSS animacije? - bit će uskoro

Što je CSS animacija?

Prije nego što vam kažem kako napraviti CSS animacije i zašto su vam uopće potrebne, prvo bih vam želio objasniti, štoCSS animacija, daj definiciju ili tako nešto.

Animacija na webu ima dvije glavne ideje. Prva ideja je oživjeti nešto... Vi ste poput dr. Frankensteina. Imate beživotno čudovište i udahnite mu život. Drugi je vizualizacija pokreta... A ključna riječ ovdje je "pokret".

Kako animirati?

Postoje dva glavna alata u CSS-u koje možemo koristiti za premještanje elemenata po web stranici. Prva (o kojoj ćemo kasnije danas) je vlasništvo tranzicija... Prije svega, uz njegovu pomoć stvaramo animacije u CSS-u. Drugi alat je vlasništvo animacija uparena s ključnim kadrovima(@keyframes - ključni kadrovi). Detaljnije ćemo istražiti ovaj alat u sljedećem vodiču, ali sada ćemo pogledati svojstvo prijelaza CSS-a. A onda ćemo razgovarati o tome što animirati na stranici (kada korisniku treba), a što ne (kada animacija izgleda glupo i neprikladno) na temelju korisničkog iskustva (UX).

CSS svojstvo prijelaza - parametri i vrijednosti

Sintaksa

Prvo, pogledajmo kako se ovo svojstvo čita i razložimo njegovu sintaksu. Ovo svojstvo pišemo ovako:

tranzicija: [imovine] [trajanje] [funkcija mjerenja vremena] [odgoditi] ;

tranzicija: visina 1s ease-out 0,2s;

Ovo svojstvo dodjeljujemo elementu koji želimo animirati. Ovaj element postaje glatki tranzicija(ili postupno) između nekoliko njegovih stanja (na primjer, visina od 100 piksela i visina od 200 piksela). I kako će ovo izgledati tranzicija(s engleskog prijelaza), ovisit će o parametrima koje mu damo.

Prvi parametar (vrijednost) svojstva prijelaza je drugi imovine element koji se animira (na primjer, visina).

Drugi parametar je trajanje (trajanje) animacije, odnosno koliko će vremena biti potrebno da element prijeđe iz jednog stanja u drugo (na primjer, 2s ili 2000ms).

Treći parametar je funkcija mjerenja vremena [vrijemefunkcija] (izbor funkcije [ popuštanjefunkcija]). Kako je intenzitet animacije raspoređen kroz vrijeme. Na primjer, animacija može početi naglo, zatim usporiti i glatko završiti prijelaz. Može se koristiti kao ključne riječi (npr. olakšati,olakšati-u-van,linearni) i funkcije Bezierove kocke (na primjer, kubični-bezier (0,17, 0,67, 0,83, 0,67)). Možete jednostavno i jednostavno prilagoditi Bezierovu kocku na ovom resursu http://cubic-bezier.com, kao i funkciju koraka za stvaranje animacije okvir po kadar (korak po korak).

I na kraju, parametar odgoditi... Kašnjenje animacije je vrijeme koje trebate pričekati prije nego što animacija (u našem slučaju prijelaz) počne.

Uzorak animacije prijelaza CSS-a

Pogledajmo ovaj primjer CSS animacije:

prijelaz: neprozirnost 300ms jednostavno ulazak 1s;

Ovdje ćemo samo animirati imanje neprozirnost(neprozirnost). To znači da ako element koji ćemo animirati ima druga svojstva, kao što su visina, širina ili boja, pa čak i ako se ta svojstva razlikuju u različitim uvjetima element, dakle glatki prijelaz(animacija) imat će samo svojstva neprozirnosti... Da li razumiješ?

Umjesto specifično svojstvo također možete koristiti ključnu riječ " svi". To znači da ćemo animirati apsolutno sva svojstva elementa koja su promijenjena u novom stanju elementa (ne samo neprozirnost), a koja se uopće mogu animirati. Jer, kao što znate, ne mogu se sva svojstva animirati. Ali više o tome kasnije.

Drugi parametar ( 300 ms) nam govori da će animacija trajati samo 300 milisekundi. To jest, element će se pojaviti brzo ili brzo otopiti, ovisno o vrijednostima svojstava u svoja dva stanja.

Funkcija mjerenja vremena ( olakšati-u-van) treći će parametar učiniti početak i kraj animacije glatkijim.

Kašnjenje ( 1 s) pokazuje koliko bi animacija trebala kasniti prije nego što se pokrene.

Općenito, ovo je formula kako ćemo napisati animaciju prijelaza. Ovo je sintaksa. Vi, ako ništa drugo, možete dodati više od jednog prijelaza [svojstava] za jedan element. Na primjer, možete animirati s različiti parametri mijenjanje visine i širine elementa. Da biste to učinili, u svojstvu prijelaza, umjesto točke-zareza na kraju, samo stavite zarez i upišite parametre za još jedno svojstvo. I ne zaboravite staviti točku-zarez na kraju nakon toga da bi to funkcioniralo.

Što se može animirati u CSS-u?

Do sada smo raspravljali samo o sintaksi svojstva prijelaza. Sada razgovarajmo o svojstvima koja možemo animirati, a koja ne. Jer postoje neke stvari koje jednostavno nema smisla animirati, a neka svojstva je jednostavno nemoguće animirati.

Animirana svojstva

Uzmimo, na primjer, svojstva kao što su:

1. veličina fonta;
2. boja pozadine;
3. širina;
4. lijevo (koliko se od lijeve strane element može pomaknuti [pozicionirati] ...

Očito ima smisla animirati ta svojstva. Ako promijenite njihove vrijednosti, to će vizualno promijeniti element. Ako promijenite veličinu fonta s, recimo, 14 na 28 piksela, vidjet ćete da je font glatko povećan, došlo je do animacije koja je trajala neko vrijeme. Animacija uvijek ima smisla ako su vrijednosti svojstva jasne (najčešće numeričke) vrijednosti. Ako povećate veličinu fonta na 100 piksela, tada ćete jasno vidjeti kako slova rastu. Također se može primijetiti glatka promjena boje pozadine [jer boja na webu ima numerički kod, na primjer, crvena rgb (255,0,0)]. Ova svojstva su animirana.

Općenito, zapamtite, ako zamislite da se animira, onda se može animirati. Najčešće djeluje.

Neanimirana svojstva

I ovdje je popis svojstava koja se ne mogu animirati (primjer):

1. prikaz;
2. obitelj fontova;
3. pozicija...

Ovo su neke od njih koje sam uzeo kao primjer kako biste mogli osjetiti razliku između animiranih i neanimiranih CSS svojstava.

Izložimo se. Možete li zamisliti kako se mijenja između " prikaz:blok; " i " prikaz:u redu-blok;"? Kako se može glatko promijeniti izgled element između " položaj:srodnika;"i" položaj:apsolutni;"? Ne, naravno, element će izgledati drugačije kada se ta svojstva promijene. Ali kako možete zamisliti tranzicija? Ti ne možeš to napraviti. Pravo? Ne možete zamisliti transformaciju fonta Helvetica u fontu Gruzija, svako slovo, jednostavno neće raditi. Možete promijeniti ove fontove, ali oni će se naglo promijeniti, neće se dogoditi animacija.

Izvedba animacije u CSS-u

Općenito, mnoga svojstva su animirana, ali neka nisu. Sada ćemo odlučiti koja su animirana svojstva bolja za animaciju, a koja lošija. Proći će o izvedbi. Dotaknuli smo se izvedbe jer je animacija proces koji zahtijeva puno resursa.

Općenito, evo stvari koje najbolje funkcioniraju za animaciju:

1. Pozicioniranje na stranici
2. Skaliranje
3. Rotacija
4. Transparentnost

Štoviše, prve tri stavke ovog popisa su svi parametri transformirati svojstva(prevesti, skalirati, rotirati). Pozicioniranje se događa duž X i Y osi.

Ako odlučite animirati bilo što drugo, riskirate da ne dobijete glatki i glatki prijelaz pri 60 sličica u sekundi. Paul Lewis & Irish

A upravo to nas zanima kada govorimo o izvedbi animacije. Općenito, najprikladnija svojstva za animaciju su transformirati ineprozirnost... Kada animirate nešto drugo, fps animacije može pasti mnogo ispod 60 fps.

Sumirajmo ovu točku na sljedeći način. Pokušajte izbjeći ponovno crtanje elemenata na web-stranici i animiranje elemenata koje je pregledniku teško prikazati (na primjer, sjene).

Kako da animiram u CSS-u?

Sada ćemo shvatiti kako pokrenuti animaciju. Što je potrebno učiniti da bi se element počeo animirati. Drugim riječima, kako napraviti animacijuCSS.

Nije teško i ima ih mnogo različiti putevi... Ali postoje 2 glavna koje morate svladati bez greške. Prvi način je animacija kada se lebdi iznad elementa(pseudo-klasa: lebdjeti). Zadržite pokazivač miša iznad elementa i animacija se aktivira. Dakle, možete animirati sam element ili bilo koji od njega. dječji elementi... Onda ću vam pokazati kako to radi. Drugi način je mijenjanje klase elementa... To jest, imate regularni element, promijenite (ili dodate) njegovu klasu u klasu koja ima potpuno različite stilove. Ako dodate klasu, dogodit će se animacija, a ako uklonite klasu, dogodit će se obrnuta animacija. to dobar način za animiranje izbornika ili padajućih izbornika.

Pogovor

Pokrili smo sve što nam je potrebno za stvaranje animacije čisti CSS... Vrlo brzo ćemo se pozabaviti time praktični primjeri, a malo kasnije - vrlo zanimljivi primjeri.

Jeste li pročitali do samog kraja?

Je li ovaj članak bio koristan?

Ne baš

Što vam se točno nije svidjelo? Je li članak bio nepotpun ili lažan?
Pišite u komentarima i obećavamo da ćemo se poboljšati!

Ova kolekcija sadrži najbolje i najkvalitetnije CSS čipove. Ovdje možete pronaći razne i nevjerojatne demonstracije i tehnike poznatih layout dizajnera i dizajnera koji pokušavaju dokazati da je sada gotovo sve moguće raditi samo u čistom CSS-u. Također ovdje možete pronaći nekoliko lekcija u kojima je detaljno opisano kako napraviti takvu kreaciju. Nadam se da će vam ova zbirka biti od koristi.

CSS 3D oblaci

U ovom demou možete stvarati i uređivati ​​otmjene oblake u 3D. Ovi CSS oblaci nam jasno daju do znanja da su mogućnosti web tehnologija gotovo beskrajne.

Čisti CSS logotipi

Ovo su primjeri logotipa napravljenih samo u čistom CSS-u. Zamislite samo, u stvaranju nisu korištene nikakve slike. To je samo nešto.

Abeceda s CSS animacijom

Izvrstan i umjetnički primjer koristeći CSS u abecedi

3D navigacija za stranicu

Jednostavna, ali vrlo elegantna navigacijska traka za web stranicu, naravno napravljena samo sa CSS3. nema slika ili skripti.

Google Doodle s CSS-om

Jedan od mnogih crteža iz google tražilica napravljeno u CSS-u. Ovo je sjajan primjer kvalitetno korištenje CSS animacije

Klizač

Dobro napravljen klizač za slike. Plus 4 primjera u demou.

Dvostruki animirani prsten

Prekrasna animacija i raznobojni prsten s malo veliki kod CSS

Zamagljivanje na CSS-u

Čini mi se da je filter jako potreban, pogotovo jer je napravljen na čistom CSS-u. pomoću zamućenja možete skrenuti pozornost korisnika na određenu točku.

Konačan vodič za Flexbox

Ovaj članak je o responzivnim flexboxovima. U potpunosti govori o ovim blokovima, iako je članak na engleskom.

Šareni i animirani CSS3 izbornik

Lijep padajući izbornik za stranicu s ikonama. Veliki plus je to što je u potpunosti urađeno u CSS-u.

CSS filteri

Kvalitetan engleski materijal koji govori o primjenom CSS-a filteri na slikama.

CSS oblici

Objavite o CSS obrasci s brojnim primjerima

CSS trake napretka

Lekcija o tome kako stvoriti elegantne trake napretka s čistim CSS-om i animacijom. Također možete vidjeti primjer i preuzeti izvore.

Animacija - Animate.css

Najpopularniji CSS animacijski projekt na internetu danas. I vjerojatno najjednostavniji i najkvalitetniji, a i besplatan.

Indikatori učitavanja - Spinkit

Iskreno govoreći, ovi pokazatelji su se već susreli na blogu, ali čini mi se da bi vam ih opet trebalo pokazati. Kako su ovo najljepši CSS indikatori na internetu.

Gumbi

Sada su gumbi uključeni CSS već teško je iznenaditi, ali to je prilično pristojna opcija

Generator za izradu prekidača

Mali i visokokvalitetni internet aplikacija s kojom možete stvoriti prekrasne prekidače za korištenje na stranici.

Alati

Besplatna CSS biblioteka s opisom alata - Hint.css

Sheme boja

Sheme boja za ljude koji ne vole kopati po kodu

CSS3 animacijačini web stranice dinamičnim. Oživljava web stranice, poboljšavajući korisničko iskustvo. Za razliku od CSS3 prijelaza, stvaranje animacije temelji se na ključnim kadrovima, koji vam omogućuju automatsku reprodukciju i ponavljanje efekata za određeno vrijeme, kao i zaustavljanje animacije unutar petlje.

CSS3 animacija se može primijeniti na gotovo sve html elemente, kao i na pseudoelemente: prije i: poslije. Popis animiranih svojstava nalazi se na stranici. Kada stvarate animaciju, ne zaboravite na mogući problemi performanse, budući da promjena nekih svojstava zahtijeva mnogo resursa.

Uvod u CSS animaciju

Podrška za preglednik

IE: 10.0
Firefox: 16,0, 5,0 -moz-
Krom: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android preglednik: 44, 4.1 -webkit-
Krom za Android: 44

1. Pravilo @keyframes

Animacija počinje instalacijom ključno osoblje@keyframes pravila. Okviri određuju koja će svojstva u kojem koraku biti animirana. Svaki okvir može uključivati ​​jedan ili više blokova deklaracije jednog ili više parova svojstava i vrijednosti. Pravilo @keyframes sadrži naziv animacije elementa koji povezuje pravilo i blok deklaracije elementa.

@keyframes sjena (od (sjena teksta: 0 0 3px crna;) 50% (sjena teksta: 0 0 30px crna;) do (sjena teksta: 0 0 3px crna;))

Ključni okviri se stvaraju pomoću ključne riječi od i do (ekvivalentno 0% i 100%) ili u postotnim bodovima, koji se mogu postaviti koliko god puta želite. Također možete kombinirati ključne riječi i postotke. Ako okviri imaju ista svojstva i vrijednosti, mogu se kombinirati u jednu deklaraciju:

@ključni okviri se pomiču (od, do (gore: 0; lijevo: 0;) 25%, 75% (gore: 100%;) 50% (gore: 50%;))

Ako okviri od 0% ili 100% nisu navedeni, tada ih korisnikov preglednik stvara koristeći izračunate (početno postavljene) vrijednosti animiranog svojstva. Ako dva ključna okvira imaju iste selektore, sljedeći će poništiti radnju prethodnog.

Nakon što je pravilo @keyframes deklarirano, možemo se pozvati na njega u svojstvu animacije:

H1 (veličina fonta: 3,5 em; boja: tamnomagenta; animacija: sjena 2s beskonačna lakoća izlaska;)

Ne preporuča se animirati ne brojčane vrijednosti(uz rijetke iznimke), jer rezultat u pregledniku može biti nepredvidljiv. Također, nemojte koristiti ključne kadrove za vrijednosti svojstava koje nemaju središnju točku, kao što su vrijednosti svojstva boje: ružičasta i boja: #ffffff, širina: auto i širina: 100px ili radijus granice: 0 i radijus granice: 50% (u ovom slučaju bilo bi ispravno odrediti radijus granice: 0%).

2. Naziv animacije naziv-animacije

Svojstvo postavlja naziv animacije. Naziv animacije kreira se u pravilu @keyframes. Preporuča se koristiti naziv koji odražava bit animacije, dok možete koristiti jednu ili više riječi koje su međusobno povezane razmakom - ili simbolom podcrtati _. Imovina se ne nasljeđuje.

Sintaksa

Div (ime animacije: mymove;)

3. Trajanje animacije trajanje animacije

Svojstvo postavlja trajanje animacije, postavljeno u sekundama ili milisekundama, negativne vrijednosti Nisu dopusteni. Nije naslijeđena. Ako je za element navedeno više od jedne animacije, možete postaviti drugačije vrijeme za svaki, navodeći vrijednosti odvojene zarezima.

Sintaksa

Div (trajanje animacije: 2 s;)

4. Funkcija vremena animacija-vrijeme-funkcija

Svojstvo određuje promjenu brzine od početka do kraja animacije pomoću privremenih funkcija. Navedeno pomoću ključnih riječi ili kubičnog beziera (x1, y1, x2, y2). Nije naslijeđena.

Sintaksa

Div (funkcija vremena animacije: linearna;)

Pomoću animacija koraka možete stvarati zanimljivi efekti kao što je upisivanje teksta ili traka napretka učitavanja.

5. Animacija s kašnjenjem animacija-kašnjenje

Svojstvo zanemaruje animaciju određeno vrijeme, što omogućuje pokretanje svake animacije pojedinačno. Negativna odgoda pokreće animaciju od određene točke unutar ciklusa, tj. od vremena naznačenog u kašnjenju. To omogućuje primjenu animacija na više fazno pomaknutih elemenata samo promjenom vremena kašnjenja.

Da biste pokrenuli animaciju u sredini, trebate postaviti negativnu odgodu koja je jednaka polovici vremena postavljenog u trajanju animacije. Nije naslijeđena.

Sintaksa

Div (odgoda animacije: 2 s;)

6. Animacija iteracija-broj iteracija

Svojstvo omogućuje da se animacija pokrene više puta. Vrijednost 0 ili bilo koji negativan broj uklanja animaciju iz reprodukcije. Nije naslijeđena.

Sintaksa

Div (broj ponavljanja animacije: 3;)

7. Smjer animacije animacija-smjer

Svojstvo postavlja smjer u kojem se animacija ponavlja. Ako se animacija ponovi samo jednom, onda je ovo svojstvo besmisleno. Nije naslijeđena.

Sintaksa

Div (režija animacije: alternativni;)

8. Kratka snimka animacije

Svi parametri reprodukcije animacije mogu se kombinirati u jedno svojstvo - animacija, navodeći ih odvojenim razmakom:

Animacija: animacija-naziv animacije-trajanje animacija-vremenska-funkcija animacija-odgoda animacija-iteracija-broj animacija-smjer;

Za reprodukciju animacije dovoljno je navesti samo dva svojstva - naziv-animacije i trajanje animacije, ostala svojstva će poprimiti zadane vrijednosti. Redoslijed u kojem su svojstva navedena nije bitan, jedino je vrijeme izvođenja animacija-trajanje uvijek mora doći prije kašnjenja animacije.

9. Animacija-play-stanje reprodukcije animacije

Svojstvo kontrolira reprodukciju i zaustavljanje animacije. Zaustavljanje animacije unutar petlje moguće je korištenjem ovog svojstva u JavaScript skripta... Također možete zaustaviti animaciju kada zadržite pokazivač iznad objekta - stanje: lebdite. Nije naslijeđena.

Sintaksa

Div: lebdjeti (stanje reprodukcije animacije: pauzirano;)

10. Stanje elementa prije i poslije animacije se reproducira u modu animacije-ispuna

Svojstvo određuje redoslijed kojim se stilovi definirani u @keyframes primjenjuju na objekt. Nije naslijeđena.

Mnogi posjetitelji pitali su se kako u praksi koristiti biblioteku Animate.css. U stvarnosti, sve se događa prilično jednostavno, trebate samo jednom proći sve faze, a zatim, analogno, ponoviti neke radnje.

1. Najprije morate preuzeti i povezati knjižnicu. Postoje tri opcije.

• Puna verzija . Sadrži više od tri tisuće redaka koda, veličine oko 60 KB. Vrlo je prikladan za prvu fazu upoznavanja s animacijom općenito, jer vam omogućuje da pogledate kako sve to funkcionira.
• Upakirana verzija (zamućena izrekom stručni jezik). U css datoteci nema kartica, razmaka i prijeloma redaka. Zbog toga se veličina datoteke smanjuje za jedan i pol puta, ali postaje teško čitati kod.
• Selektivni učinci. Najprikladniji je za većinu zadataka, jer vam omogućuje da odredite samo efekte koji vam se sviđaju, a da se riješite nepotrebnih.

2. Za primjenu efekta animacije na željeni element dodajte mu dvije klase - animated i klasu s nazivom efekta, recimo fadeInDown (pogledajte popis svih efekata i njihove nazive). Na primjer, pretpostavimo da želite dodati treperenje svim slikama na stranici. U HTML-u napišite sljedeće:

Ako web-mjesto koristi jQuery, dodavanje klasa se pojednostavljuje i vrši putem JavaScripta.

3. Sama animacija se automatski uključuje kada se stranica učita. Ovo je korisno za skočne poruke koje žele privući pozornost korisnika (primjer 1).

Primjer 1. Skočna poruka

Da bi se efekt aktivirao kada kursor miša lebdi iznad elementa, morate koristiti JavaScript. Kao primjer, uzmite u obzir slike koje se pomiču kada zadržite pokazivač miša iznad njih. Idi na oznaku dodajte animiranu klasu i uključite jQuery (primjer 2).

Primjer 2. Galerija

V ovaj primjer kada se lebdi iznad animirane slike, dodaje se još jedna klasa odbijanja; ako je kursor uklonjen, tada se uklanja i klasa odbijanja.

4. Konačno, možete prilagoditi animaciju po svom ukusu promjenom brzine animacije, kao i postavljanjem vremena odgode putem CSS-a. Oba su neobavezna i primjenjuju se prema potrebi.

Animirani (-webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animacija-duration: .6s; -webkit-animation-dey: 1s; -o -kašnjenje animacije: 1s; -moz-kašnjenje-animacije: 1s; kašnjenje animacije: 1s;)

Pozdrav dragi čitatelji. Na ovaj dan, razgovarajmo o, prilično, zanimljiva stvar poput CSS animacije. Odnosno, ova animacija elemenata radi se samo uz pomoć stilova i ovdje se ne koriste skripte.

Kao što vidite, ovdje postoji atribut : lebdjeti koji mijenja stil pozadine pri lebdenju, u nekim bi primjerima trebao biti obavezan.

Glatka promjena boje elementa pri lebdenju s prijelazom

# kutija 1 (
margin-bottom: 5px;
boja pozadine: #ccc;

padding: 10px;
poravnavanje teksta: središte;
širina: 200px;
visina: 100px;

uvlaka teksta: 0px;
obrub: 1px čvrsta # 888;
-moz-prijelaz: boja pozadine 0,8s 0,1s lakoća;
-o-prijelaz: boja pozadine 0,8s 0,1s lakoća;
-webkit-prijelaz: boja pozadine 0,8s 0,1s lakoća;
kursor: pokazivač ;)

# kutija 1 : lebdjeti {
boja pozadine: # 97CE68;
boja: # 333;
}

Kao što vidite, ovu animaciju smo postigli pomoću atributa tranzicija... Ovdje možete promijeniti brzinu animacije u sekundama, u u ovom slučaju košta 0,8s dok se boja u potpunosti ne promijeni pri lebdenju i 0,1s prije nego što animacija počne nakon lebdenja i pomicanja kursora. (Oprostite zbog zagonetke :-)) Ovu vrijednost možete promijeniti po potrebi.

Boja pozadine pri lebdenju postavljena je kao atribut : lebdjeti, ovdje je potrebno, inače animacija neće raditi.

Promjena veličine elementa

# kutija 2 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: # 333;

padding: 10px;
poravnavanje teksta: središte;
širina: 200px;
visina: 100px;

uvlaka teksta: 0px;
obrub: 1px čvrsta # 888;
-moz-prijelaz: sve 1s linearne;
-o-prijelaz: sve 1s linearne;
-webkit-prijelaz: sve 1s linearne;
kursor: pokazivač ;)

# kutija2 : lebdjeti {
boja pozadine: # 97CE68;
boja: # 000;
širina: 150px;
visina: 50px;
}

U ovom primjeru postigli smo glatku promjenu veličine bloka pri lebdenju. Standardna vrijednost 200x100, a magnituda lebdenja je 150x50, što je postavljeno atributom : lebdjeti.

Ovdje također možete promijeniti blok samo po širini ili visini, samo trebate : lebdjeti izbrisati širina:- blok se mijenja samo po visini, visina:- blok se mijenja samo u širini.

Također možete promijeniti stopu promjene. U ovom slučaju, to je 1s.

Uvijanje predmeta

# kutija 3 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: # 333;

padding: 10px;
poravnavanje teksta: središte;
širina: 200px;
visina: 100px;

uvlaka teksta: 0px;
obrub: 1px čvrsta # 888;
-moz-prijelaz: sve 1s 0,1s olakšanje;
-o-prijelaz: sve 1s 0,1s olakšanje;
-webkit-prijelaz: sve 1s 0,1s jednostavnost;
kursor: pokazivač ;)

# box3: lebdjeti (
boja pozadine: # 97CE68;
boja: # 000;
-webkit-transform: rotirati (360 stupnjeva);
-moz-transform: rotirati (360 stupnjeva);
-o-transformirati: rotirati (360 stupnjeva);
}

Uvijanje se događa pomoću transformirati i tranzicija... U ovom slučaju, objekt se okreće u smjeru kazaljke na satu za 360 stupnjeva brzinom od jedne sekunde. Ako želite da se blok okreće u smjeru suprotnom od kazaljke na satu, transformirati vrijednost se mora staviti - (minus). Naravno, stupanj rotacije se može mijenjati.

Glatko zumirajte i smanjite objekt

# kutija 4 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: # 333;
padding: 10px;
poravnavanje teksta: središte;
širina: 200px;
visina: 100px;

uvlaka teksta: 0px;
obrub: 1px čvrsta # 888;
-moz-prijelaz: sve 3s ease-out;
-o-prijelaz: sve 3s ease-out;
-webkit-prijelaz: sve 3s ease-out;
kursor: pokazivač ;)

# box4: lebdjeti (
boja pozadine: # 97CE68;
boja: # 000;
-webkit-transform: mjerilo (2);
-moz-transform: skala (2);
-o-transform: mjerilo (2);
}

U ovom primjeru, blok je glatko udvostručen. Ova vrijednost je izložena transformacija: mjerilo (2)... Ako postavite vrijednost na 1,5, povećanje bloka će biti 1,5 puta.

Na isti način možete smanjiti veličinu blok, na primjer, stavite vrijednost 0,5.

Glatki blok pomak prema dolje

# kutija 5 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: # 333;
padding: 10px;
poravnavanje teksta: središte;
širina: 200px;
visina: 100px;

uvlaka teksta: 0px;
obrub: 1px čvrsta # 888;
-moz-prijelaz: sve 1s jednostavnost-in-out;
-o-prijelaz: sve 1s jednostavnost-in-out;
-webkit-prijelaz: sve 1s jednostavnost-in-out;
kursor: pokazivač ;)

# box5: lebdjeti (
boja pozadine: # 97CE68;
boja: # 000;
-webkit-transform: prevedi (0,50px);
-moz-transform: prevesti (0,50px);
-o-transform: prevesti (0,50px);
}

Ovdje je kretanje dano u pikselima. U ovom slučaju (0,50px). Također možete pomaknuti blok prema gore s ovom vrijednošću od 0, -50px. Ili dijagonalno prema dolje 50px, 50px. Jednom riječju, blok se može pomaknuti bilo gdje.

To je u biti sve što sam htio reći. Ne, ne sve :-) Zaboravio sam vas podsjetiti da je ovo CSS animacija može se primijeniti na sve objekte na stranici: slike, tekst, naslove, ikone itd. Za linkove je savršena glatka promjena boje, po meni je jako lijepa. :-)

Pa ipak, ovu informaciju s nama je podijelila stranica shpargalkablog.ru. Na čemu mu veliko hvala.

Sad je to sve sigurno :-) Vidimo se uskoro, prijatelji.