Css3 primjeri animacije. Dvostruki animirani prsten

Zdravo 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 video snimci su bili uključeni engleski jezik, i, vjerovatno, ne zna svaki layout dizajner engleski na dovoljnom nivou da razumije i savlada cjelinu potrebne informacije... Stoga sam odlučio da vam prevedem ove lekcije (tačnije, napravim besplatan prijevod). Nema potrebe za zahvaljivanjem. dakle:

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

Šta je CSS animacija?

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

Animacija na webu ima dvije glavne ideje. Prva ideja je oživiti nešto... Ti si kao dr Frankenštajn. Imate beživotno čudovište i udahnete 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 pomicanje elemenata po web stranici. Prva (o kojoj ćemo kasnije danas) je imovina tranzicija... Prije svega, uz njegovu pomoć kreiramo 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 tutorijalu, ali sada ćemo pogledati svojstvo CSS prijelaza. A onda ćemo razgovarati o tome šta animirati na stranici (kada korisniku treba), a šta ne (kada animacija izgleda glupo i neprikladno) na osnovu korisničkog iskustva (UX).

CSS svojstvo prijelaza - parametri i vrijednosti

Sintaksa

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

tranzicija: [imovine] [trajanje] [funkcija mjerenja vremena] [kašnjenje] ;

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(sa engleskog prelaza), zavisiće od parametara 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 pređe iz jednog stanja u drugo (na primjer, 2s ili 2000ms).

Treći parametar je funkcija mjerenja vremena [tajmingfunkcija] (koristeći funkciju [ 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. lakoća,lakoća-u-van,linearno) i funkcije Bezierove kocke (na primjer, kubni-bezier (0,17, 0,67, 0,83, 0,67)). Možete jednostavno i praktično prilagoditi Bezierovu kocku na ovom resursu http://cubic-bezier.com, kao i funkciju koraka kako biste kreirali animaciju okvir po kadar (korak po korak).

I na kraju, parametar kašnjenje... Kašnjenje animacije je količina vremena koju trebate čekati prije nego što animacija (u našem slučaju prijelaz) počne.

Uzorak animacije CSS prijelaza

Pogledajmo ovaj primjer CSS animacije:

tranzicija: neprozirnost 300ms lakoća ulaska 1s;

Ovdje ćemo samo animirati nekretninu neprozirnost(prozirnost). 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 uslovima element, dakle glatka tranzicija(animacija) će imati samo svojstva neprozirnosti... Da li razumiješ?

Umjesto specifična imovina možete koristiti i ključnu riječ “ sve". 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 gospođa) nam govori da će animacija trajati samo 300 milisekundi. Odnosno, element će se pojaviti brzo ili se brzo otopiti, ovisno o vrijednostima svojstava u svoja dva stanja.

Funkcija mjerenja vremena ( lakoća-u-van) treći parametar će 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 [osobina] za jedan element. Na primjer, možete animirati sa različiti parametri mijenjanje visine i širine elementa. Da biste to učinili, u svojstvu tranzicije, umjesto tačke zarez na kraju, samo stavite zarez i upišite parametre za još jedno svojstvo. I ne zaboravite staviti tačku i zarez na kraju nakon toga da bi to funkcioniralo.

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

Do sada smo raspravljali samo o sintaksi svojstva tranzicije. Hajde sada da razgovaramo 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 slova;
2. boja pozadine;
3. širina;
4. lijevo (koliko od lijeve strane element može biti pomaknut [pozicioniran] ...

Očigledno ima smisla animirati ova svojstva. Ako promijenite njihove vrijednosti, to će vizualno promijeniti element. Ako promijenite veličinu fonta sa, recimo, 14 na 28 piksela, vidjet ćete da se font postepeno povećavao, pojavila se animacija 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, onda ć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 je animirano, onda se može animirati. Najčešće radi.

Svojstva koja se ne mogu animirati

A evo i liste svojstava koja se ne mogu animirati (primjer):

1. display;
2. font-family;
3. pozicija ...

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

Hajde da se izložimo. 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 " pozicija:relativna;" i " pozicija:apsolutni;"? Ne, naravno, element će izgledati drugačije kada se ova svojstva promijene. Ali kako možete zamisliti tranzicija? Ne možete to učiniti. zar ne? Ne možete zamisliti transformaciju fonta Helvetica u fontu Georgia, svako slovo, jednostavno neće raditi. Možete promijeniti ove fontove, ali će se naglo promijeniti, neće se dogoditi animacija.

Performanse 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 performansama. Dotakli smo se performansi 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

Štaviše, prve tri stavke ove liste su svi parametri transformirati svojstva(prevesti, skalirati, rotirati). Pozicioniranje se vrši duž X i Y osi.

Ako odlučite da animirate bilo šta drugo, rizikujete da ne dobijete glatku i glatku tranziciju pri 60 sličica u sekundi. Paul Lewis & Irish

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

Sumirajmo ovu tačku na sljedeći način. Pokušajte izbjeći ponovno crtanje elemenata na web stranici i animiranje elemenata koje je pretraživaču teško prikazati (na primjer, sjene).

Kako da animiram u CSS-u?

Sada ćemo shvatiti kako pokrenuti animaciju. Šta treba učiniti da bi 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 bez greške savladati. Prvi način je animacija kada se lebdi iznad elementa(pseudo-klasa: lebdjeti). Zadržite pokazivač miša iznad elementa i animacija se pokreće. Dakle, možete animirati sam element ili bilo koji od njih. podređeni elementi... Onda ću vam pokazati kako to radi. Drugi način je promjena 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 menija ili padajućih menija.

Pogovor

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

Jeste li pročitali do samog kraja?

Je li ovaj članak bio od pomoći?

Ne baš

Šta vam se tačno nije dopalo? 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 nevjerovatne 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 kolekcija biti od koristi.

CSS 3D oblaci

U ovoj demonstraciji možete kreirati i uređivati ​​fensi oblake u 3D. Ovi CSS oblaci nam jasno pokazuju da su mogućnosti web tehnologija gotovo beskrajne.

Čisti CSS logotipi

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

Abeceda sa CSS animacijom

Odličan i umjetnički primjer koristeći CSS po abecedi

3D navigacija za sajt

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

Google Doodle sa CSS-om

Jedan od mnogih crteža iz google pretraživač napravljeno u CSS-u. Ovo je sjajan primjer kvalitetno korišćenje CSS animacije

Klizač

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

Dvostruki animirani prsten

Prekrasna animacija i raznobojni prsten sa malo veliki kod CSS

Zamagljivanje na CSS-u

Čini mi se da je filter jako potreban, pogotovo što je napravljen na čistom CSS-u. koristeći zamućenje, možete skrenuti pažnju korisnika na određenu tačku.

Definitivni vodič za Flexbox

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

Šareni i animirani CSS3 meni

Lep padajući meni za sajt sa 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

Post about CSS forme sa brojnim primjerima

CSS trake napretka

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

Animacija - Animate.css

Najpopularniji projekat CSS animacije na internetu danas. I vjerovatno najjednostavniji i najkvalitetniji, a i besplatan.

Indikatori učitavanja - Spinkit

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

Dugmad

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

Generator za kreiranje prekidača

Mala i internet visokog kvaliteta aplikacija s kojom možete kreirati prekrasne prekidače za korištenje na web stranici.

Alati

Besplatna CSS biblioteka - Hint.css

Šeme boja

Šeme 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 prelaza, kreiranje animacije se zasniva na ključnim kadrovima, koji vam omogućavaju da automatski reprodukujete i ponavljate efekte za određeno vreme, kao i da zaustavite animaciju unutar petlje.

CSS3 animacija se može primijeniti na gotovo sve html elemente, kao i na pseudoelemente: prije i: poslije. Spisak animiranih svojstava je dat na stranici. Kada kreirate animaciju, ne zaboravite na mogući problemi performanse, jer promjena nekih svojstava zahtijeva mnogo resursa.

Uvod u CSS animaciju

Podrška za pretraživač

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android pretraživač: 44, 4.1 -webkit-
Chrome za Android: 44

1. Pravilo @keyframes

Animacija počinje instalacijom ključno osoblje@keyframes pravila. Okviri određuju koja svojstva u kom koraku će 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 ime 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 kreiraju pomoću ključne riječi od i do (ekvivalentno 0% i 100%) ili u procentima, koji se mogu podesiti koliko god puta želite. Također možete kombinirati ključne riječi i procentne poene. Ako okviri imaju ista svojstva i vrijednosti, mogu se kombinirati u jednu deklaraciju:

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

Ako okviri od 0% ili 100% nisu specificirani, tada ih korisnikov pretraživač kreira koristeći izračunate (početno postavljene) vrijednosti animiranog svojstva. Ako dva ključna okvira imaju iste selektore, onda će sljedeći 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čno lako ulazak;)

Nije preporučljivo animirati ne numeričke vrijednosti(uz rijetke izuzetke), jer rezultat u pretraživaču može biti nepredvidljiv. Također, nemojte koristiti ključne kadrove za vrijednosti svojstava koje nemaju središnju tač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. Ime animacije naziv-animacije

Svojstvo postavlja naziv animacije. Ime animacije kreira se u pravilu @keyframes. Preporučljivo je koristiti naziv koji odražava suštinu animacije, dok možete koristiti jednu ili više riječi povezanih jedna s drugom pomoću razmaka - ili simbola donja crta _. 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 dozvoljeni. Nije naslijeđen. 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. Specificirano pomoću ključnih riječi ili kubičnog-beziera (x1, y1, x2, y2). Nije naslijeđen.

Sintaksa

Div (funkcija vremena animacije: linearna;)

Korišćenjem animacija koraka možete kreirati zanimljivi efekti kao što je kucanje teksta ili traka toka učitavanja.

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

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

Da biste pokrenuli animaciju u sredini, trebate postaviti negativno kašnjenje jednako polovini vremena postavljenog u trajanju animacije. Nije naslijeđen.

Sintaksa

Div (kašnjenje animacije: 2s;)

6. Animacija iteracija-broj iteracija

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

Sintaksa

Div (broj ponavljanja animacije: 3;)

7. Smjer animacije animation-direction

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

Sintaksa

Div (režija animacije: alternativni;)

8. Kratko snimanje animacije

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

Animacija: animacija-name animacija-trajanje animacija-vremenska-funkcija animacija-kašnjenje animacija-iteracija-broj animacija-smjer;

Za reprodukciju animacije dovoljno je navesti samo dva svojstva - naziv-animacije i trajanje animacije, a ostala svojstva će poprimiti zadane vrijednosti. Redoslijed kojim 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 pređete mišem iznad objekta - stanje: lebdite. Nije naslijeđen.

Sintaksa

Div: lebdjeti (stanje reprodukcije animacije: pauzirano;)

10. Stanje elementa prije i nakon reprodukcije animacije animation-fill-mode

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

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

1. Prvo morate preuzeti i povezati biblioteku. Postoje tri opcije.

• Puna verzija . Sadrži više od tri hiljade linija koda, veličine oko 60 KB. Pogodan je za prvu fazu upoznavanja s animacijom općenito, jer vam omogućava da pogledate kako sve to funkcionira.
• Upakovana verzija (zamućena izgovaranjem stručni jezik). U css datoteci nema tabova, razmaka i prijeloma linija. Zbog toga se veličina datoteke smanjuje za jedan i pol puta, ali postaje teško čitati kod.
• Selektivni efekti. Najprikladniji je za većinu zadataka, jer vam omogućava da odredite samo efekte koje volite, oslobađajući se nepotrebnih.

2. Da biste primenili efekat animacije na željeni element, dodajte mu dve klase - animated i klasu sa imenom efekta, recimo fadeInDown (pogledajte listu svih efekata i njihova imena). Na primjer, pretpostavimo da želite dodati treperenje svim slikama na stranici. U HTML-u napišite sljedeće:

Ako stranica 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 iskačuće poruke koje imaju za cilj da privuku pažnju korisnika (primjer 1).

Primjer 1. Iskačuća poruka

Da bi se efekat aktivirao kada kursor miša lebdi iznad elementa, morate koristiti JavaScript. Kao primjer, uzmite u obzir slike koje se pomiču kada pređete preko njih kursorom miša. 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 svojoj želji promjenom brzine animacije, kao i postavljanjem vremena kašnjenja putem CSS-a. Oba su opciona i primjenjuju se po 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 čitaoci. Na ovaj dan, hajde da pričamo o, prilično, zanimljiva stvar poput CSS animacije. Odnosno, ova animacija elemenata se radi samo uz pomoć stilova i ovdje se ne koriste skripte.

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

Glatka promjena boje elementa pri lebdenju s prijelazom

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

padding: 10px;
text-align: centar;
širina: 200px;
visina: 100px;

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

# box1 : lebdeti {
boja pozadine: # 97CE68;
boja: # 333;
}

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

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

Promjena veličine elementa

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

padding: 10px;
text-align: centar;
širina: 200px;
visina: 100px;

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

# box2 : lebdeti {
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 : lebdeti.

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

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

Izvrtanje objekta

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

padding: 10px;
text-align: centar;
širina: 200px;
visina: 100px;

uvlaka teksta: 0px;
granica: 1px čvrsta # 888;
-moz-transition: sve 1s 0.1s ease-in;
-o-transition: sve 1s 0,1s ease-in;
-webkit-transition: sve 1s 0.1s jednostavnost;
kursor: pokazivač;)

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

Uvijanje se javlja upotrebom 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 rotira suprotno od kazaljke na satu, transformirati vrijednost se mora staviti - (minus). Naravno, stepen rotacije se može menjati.

Glatko uvećavajte i umanjujte objekt

# box4 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: # 333;
padding: 10px;
text-align: centar;
širina: 200px;
visina: 100px;

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

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

U ovom primjeru, blok je glatko udvostručen. Ova vrijednost je izložena transformacija: skala (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

# box5 (
margin-bottom: 5px;
boja pozadine: #ccc;
boja: # 333;
padding: 10px;
text-align: centar;
širina: 200px;
visina: 100px;

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

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

Ovdje je kretanje dato u pikselima. U ovom slučaju (0,50px). Također možete natjerati blok da se pomakne gore sa ovom vrijednošću od 0, -50px. Ili dijagonalno naniže 50px, 50px. Jednom riječju, blok se može pomjeriti bilo gdje.

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

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

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