CSS Animation i njegove mogućnosti

Postavljajući pitanje, kako napraviti animaciju

Tajna idejnih dizajnera

Glavni savjet koji se može dati onima koji žele naučiti puno, što je glatka animacija CSS-a, jest ovo. Svakodnevnim eksperimentima s gotovim dijelovima koda pokušajte provesti vlastite eksperimente. U to vrijeme slobodno od rada na svojim mjestima, pokušati vidjeti što se događa s presavijanjem komad koda, na studij ovu ili onu imovinu u cijelosti. Pokušajte implementirati sve vrste zanimljivih ideja pomoću potpuno različitih jezičnih alata, a CSS animacija će se otvoriti za vas na novoj strani. Ovaj jednostavan savjet je sljedeći - eksperiment.

CSS animacija izgleda

A sada se obratimo zanimljivim primjerima. Uobičajeno, standardna upotreba animacije je promjena nekih elemenata web-lokacije glatko tijekom vremena. Ali ovo je pretjerano, zar ne misliš? Stoga ćemo ovdje podijeliti neobičan način korištenja vremena pojavljivanja animacije.

Činjenica je da stvarne promjene na mjestu u komadiću animacije ili u njegovom punom obliku mogu biti gotovo trenutačne. Za ovo smo dodijelili dva ključna okvira, ali koristimo vrlo mali interval. Na primjer, može biti jednako 0,001%. U ovom slučaju, CSS animacija može se dogoditi odmah. Ovo je savršeno za oponašanje bilo kojeg neonskog znaka. Ovaj znak će treptati, a ako je animacija CSS onda će biti više transparentnosti i za korištenje i značajka teksta-sjena, znak će gotovo kao prava stvar.

Evo primjera koda.

Poboljšanje funkcionalnosti gumba

Ako razmotrimo pitanje kako to može biti neuobičajeno CSS-animacija gumb, onda možemo reći da su mogućnosti ukrašavanja gumba na web stranicama mnoge. Razmotrimo jedan primjer. Učinak prešanog konveksnog gumba. Primjer koda je u nastavku.

S ovim jednostavnim dijelom koda animacija CSS bloka izgledat će prilično dobra. Izgleda vrlo zanimljivo i često se koristi na savršenim različitim mjestima.

CSS-animacija kada se lebdi nad fragmentom web mjesta

Što je dinamičniji i suvremeniji site, to više ostaje korisnik na njemu. Osim toga, interaktivnost također igra važnu ulogu. Naravno, to je točno, ali što može pomoći da web mjesto bude što interaktivnije?

Vrlo dobro izgleda raditi s dizajnom elemenata i fragmenata web mjesta kada lebdite mišem. Animacija tipke kada prelazite mi je gore spomenuto, ali osim toga možete „oživjeti” i razni komadi mjestu, što ih najviše stila. Kao i sve ostalo, glavno je načelo ovdje ne pretjerivati.

Dakle, ima izvrsno svojstvo prijelaza, što može potrajati do četiri povezane osobine.

U određenom vremenu, CSS-animacija kada se zadrži na ovom komadu koda promijenit će se. Vrijeme određuje trajanje svojstva. Naime, kada se zadržite iznad elementa, počinje mijenjati na svoj način neka svojstva koja smo postavili u izborniku. Za naš slučaj to je element (dot front). Nešto niže je primjer koda, kada je prijelaz iz spremnik diva, koja ima pseudo .hover, pozadina mijenja od crvene do zelene.

Kada držite pokazivač miša korisnika, CSS animacija se ne mijenja odmah, ali s odgodom djelića sekunde, što stvara zanimljiv efekt.

Osim toga, ako u prethodnom primjeru, pitali jedno pravilo, da je pozadina u elementu div se mijenja od crvene do zelene i kretanja unutar 0,4 sekunde, treba napomenuti da koristite sve vrijednosti, možete se prijaviti na cijelu imovinu u cijelosti odmah.

Primjer koda je sljedeći.

Kao što je prikazano, svojstva ispuna i pozadine imat će učinak prijelaza, što određuje prijelazno svojstvo. Imajte na umu da možete odrediti određeni skup vrijednosti odvojenih zarezima.

Nekoliko nijansi korištenja ove vrste animacije na gumbima

U principu, u velikoj mjeri, nije bitno u kojem će se redoslijedu ove vrijednosti navesti i navesti. Osim jednog slučaja. Možemo se baviti imovinom odgode. U tom slučaju moramo navesti duljinu vremena. Drugim riječima, morat ćemo navesti u kodu koliko će dugo kašnjenje trebati.

Zapamtite, međutim, da neka svojstva ne mogu imati učinak prijelaza. To jest, oni ne mogu biti prijelazni. To je zbog činjenice da možda već nisu animirani.

Animacija teksta

Uz pomoć koda, također se može odrediti izvrsna CSS tekstualna animacija. Ovo može biti neki članak, a glavni naslov, naziv stranice. Kao što je gore već spomenuto, ovdje je glavna stvar ne pretjerivati, a ne pretvoriti svoju web lokaciju u odlagalište koje će izgledati jeftino.

Pa, pokušajmo saznati, što je animacija tekstualnog CSS-a i stvoriti ga i tekstne sjene. Možda ste vidjeli horor filmove u kojima su se imena slika same izblijedile na nekoj mračnoj tamnoj pozadini. Pokušajmo stvoriti nešto slično na općem primjeru.

Animirajte tekst u stilu horor filmova

Zapravo, sama ideja je stvaranje teksta u kojem će slova biti lagano zamagljena i okretati se. Mora postojati prostor između slova. Mi ćemo upotrijebiti sjenku među slovima, kao i interval. Da bismo implementirali ideju, trebamo pisma Lettering.js iz autorskog djela Dave Rupert. Potrebno je umetati riječi i slova u nekoliko oznaka na poleđini. Prvo, trebate zamotati fraze u h2 tagu. Evo primjera koda.

Onda zamotajte sve riječi u h2 oznake u span tag.

To će se dogoditi ovako.

Izgledat će malo glomazno, ali nemojte biti neugodno.

Nabavite prilično ludu strukturu.

Kao rezultat toga, svaku od slova koja imamo u span tagu omotamo. Ispalili su se jako puno. Ali u gore navedenom kodu, primjer je sasvim pojednostavljen. Sami možete napisati cijelu strukturu i bit će nešto veći. Ovisi također o tome koji će tekst koristiti.

Završite naš rad s malom stilizacijom. Sva nas zaglavlja u gornjem primjeru bit će smještena u punoj širini zaslona. I zauzima gotovo sav slobodni prostor.

Budući da ćemo staviti sva naša pisma u središte zaslona, ​​za našu kontejneru također trebamo fleksibilnu kutiju.

Dajmo primjer njegovog koda.

Sada smo učinili da sva slova, koji su zamotan u span class, koji pripada roditelj klasa .os upozorenja, bit će smješten i da će biti priključen na njega u sredini.

Nemojte zaboraviti dodati malo slobodnog prostora, tj. Razmak između razmaka slova.

U tom slučaju, prvi omot će imati određenu dodatnu imovinu. Ovo svojstvo je perspektiva. To će nam omogućiti da to napravimo tako da će ova stranica, kao da se ističe, istaknuti.

Sama slova će biti transparentna, a mi ćemo pokrenuti animacijski interval za njih negdje u 5.2 sekundi. Ispod je primjer koda.

Također je važno utvrditi kako i s kojim kašnjenjem naše ponude i fraze izgledaju. Koji dio teksta će se pojaviti brže od prethodne, i koliko. Kôd će izgledati ovako.

Dajemo mali, ali vrlo znatiželjan učinak. Postavite neprozirnost na 0,2. Razmak slova bit će prilično velik. Slova će također biti lagano zakrenuta duž Y osi. Vi i korisnici vaše web stranice vidjet ćete samo mali dio tih slova. Nemojte zaboraviti i utjecati na svojstvo sjena teksta. Pola animacije, učinit ćemo neobičnu stvar. Mi ćemo usmjeriti slovima sebe, ali i da se smanji razmak koji je između njih, a zatim povećati neprozirnost, a nakon povernom znakova na 0 za osi Y.

Na kraju ćemo dodati nestajuća slova i izmjeriti ih malo. To će opet dati mali efekt zamućenja.

I konačno posljednja fraza CSS-animacije.

I da, konačno dodati konačni dodir. Usredotočit ćemo se na neke specifične riječi. Imat će veliku oznaku. To će dati nužan naglasak.

Ne zaboravite na izvore inspiracije

Kada pokušate eksperimentirati s CSS svojstvima i animacijama, pokušajte pronaći inspiraciju u svemu u svakodnevnom životu. To može biti bilo što, od zanimljive web stranice do sjajnog video učinka.

Osim toga, ako ne vidite kako se ovaj ili onaj učinak izvodi i pokušajte ga sami stvoriti, možete postići sjajne rezultate. Ili barem uvijek naučite nešto više o mogućnostima programskog jezika koji zapravo koristite. Čak ni ideja koju niste u potpunosti implementirala može biti jako učinkovita.