CSS animacije i njegove mogućnosti

Pitate se kako napraviti animaciju CSS, mnogi korisnici ići u potragu za lekcije i instrukcije. Iako takva uputstva možete pronaći ovdje, između ostalog, mi ćemo vam dati glavni korisne savjete u stvaranju animacije pomoću CSS-a.

idealan razvoj tajna

Savjet koji se može dati onima koji žele da u potpunosti znam šta je glatku animaciju CSS, je kako slijedi. Kada se svakodnevno eksperimente sa pripremljenim komada koda i pokušajte da izvršavaju svoje vlastite eksperimente. U to vrijeme slobodno od rada na vlastitim stranicama, pokušajte da vidim šta se dešava sa sklapanje dio koda, da studira ovo ili ono imovine u cijelosti. Nastoje implementirati mnogo zanimljivih ideja pomoću potpuno drugačiji jezik alata, i CSS animacije će se otvoriti za vas na novi način. Ovaj jednostavan savjet je ovo - eksperiment za sebe.

CSS-animacije izgled

A sada zanimljivih primjera. Po pravilu, standardna upotreba animacije je promijeniti neke elemente stranice postepeno tokom vremena. Ali ovo je previše očigledno, zar ne? I evo nas podijeliti s vama izuzetan način koristiti u vrijeme pojave animacije.

Činjenica da su stvarne promjene lokacije u komadu animacije ili u cijelosti može biti gotovo trenutna. Da biste to učinili, pitamo bilo koja dva ključna kadra, ali koriste vrlo mali opseg. Na primjer, to može biti jednak 0,001%. U ovom slučaju, CSS animacije se može dogoditi odmah. To je pogodno za simuliranje neonski znak. Znak će treptati, a ako će animaciju CSS tada biti više transparentnosti i za korištenje i mogućnost tekst-sjena, znak će gotovo kao prava stvar.

Ovdje je primjer koda.

Poboljšati funkcionalne tipke

Ako uzmemo u obzir pitanje šta može biti neobično dugme CSS-animacije, može se reći da je dugme opcije ukras na stranicama veliki skup. Razmotrimo jedan primjer. Efekat pritiskom na konveksne tipke. Primjer kod - ispod.

Sa tako jednostavan komad animacije CSS blok koda će izgledati dobro. Izgleda vrlo zanimljivo i često se koristi na potpuno različitim lokacijama.

CSS-animaciju kada prelazite preko web-lokaciju isječka

Dinamičan i moderan sajt, što duže ostaje na korisniku. Osim toga, važnu ulogu je odigrao i interaktivnosti. To je svakako istina, ali ono što može pomoći da se sajt kao interaktivni moguće?

Vrlo dobro onda gledati da radi sa elementima dizajna i fragmenti stranice kada se miš. Animacija tipke kada hover smo razgovarali gore, ali osim toga možete "oživjeti" i različitih komada lokacije, što ih čini najviše stila. Kao i sve ostalo, glavno načelo ovdje - ne preteruj.

Dakle, postoji Prekrasno imanje tranzicije, što može potrajati i do četiri osobine koje se odnose.

Tokom određenog vremena CSS-animaciju kada prelazite preko ovaj komad koda će se promijeniti. Vrijeme je određena imovina trajanje. To jest, kada prelazite preko stavke počinje neobična promjena imovinu koja smo postavili u selektor. U našem slučaju to je - .element (nadalje). Nešto ispod je primjer koda, kada je tranzicija iz posude div, koji ima pseudo .hover, pozadina mijenja iz crvene u zelenu.

Kada korisnik lebdi miša CSS animacije se odmah ne menja, ali kasni neki djeliću sekunde, čime se stvara zanimljiv efekt.

Osim toga, ako u prethodnom primjeru, tražili ste određeni pravilo da u pozadini u div element je promijenjen iz crvene u zelenu i krenuti u roku od 0,4 sekunde, treba napomenuti da je korištenje svih vrijednosti, možete se prijaviti na cijelu imovinu u cijelosti odmah.

Primjer kod predstavljeni kao slijedi.

Kao što je prikazano u svojstvima padding i pozadine tranzicije efekt će se dogoditi koji je odlučan u tranziciji vlasništva. Trebate imati na umu da možete odrediti zarezima odvojen određeni skup vrijednosti.

Neke nijanse korištenja ove vrste animacije na dugmad

U principu, na duge staze to nije toliko bitno kojim redom će biti naveden i prebačen na vrijednosti podataka. Osim u jednom slučaju. Možemo se baviti imovinom zakašnjenjem. U tom slučaju, potrebno je odrediti trajanje i vrijeme. Drugim riječima, mi ćemo morati kod reći koliko dugo je vrlo potrebno da nas neće doći do kašnjenja.

Imajući u vidu da neke osobine ne može biti učinak tranzicije. To jest, oni ne mogu biti prolazne. To je zbog činjenice da oni ne mogu biti animirani.

tekst animacija

Uz pomoć kod može se postaviti i odličnu animaciju CSS teksta. To može biti neka vrsta člana, i glavni naslov, naslov stranice. Kao što je već spomenuto, glavna stvar - ne preterujte i ne pretvoriti svoje stranice u deponiju, a to će izgledati jeftino.

Pa, hajde da pokušamo da sazna šta CSS animacije teksta, i stvoriti ga, i tekst sjene. Možda ste vidjeli horor filmova, gdje su imena slika se činilo da bledi u bilo dim-tamnoj pozadini. Probajmo ponovo opšti primer ovako nešto.

Animirati tekst u stilu horor filmova

Zapravo, cijela ideja je da se tekst u kojem se slova bili malo nejasna i da će rotirati. U kojem između slova bi trebalo da bude prostora. Mi ćemo koristiti interalphabetic hlad, kao i interval. U cilju realizacije ideja, potreban nam je skripta Lettering.js autorstvo Dave Rupert. Bilo mu je potrebno da će završiti riječima plus nekoliko slova u oznaci raspona. Prvo je potrebno završiti rečenicu u H2 tag. Ovdje je primjer koda.

Onda obernom Sve riječi na H2 tagovi u oznaci raspona.

To se događa kao što je ovaj.

To će izgledati pomalo nezgrapno, ali ne dozvoliti da se to smeta.

Manic dobiti dovoljno strukture.

Kao rezultat toga, mi imamo jedno od naših postojećih slova umotana u oznaku raspona. Ispostavilo se zaista mnogo. Ali primjer je prilično pojednostavljeno u kodu iznad rezultirala. cijelu njihovu strukturu, možete sami pisati, i to će biti još nekoliko. To zavisi i kakav tekst koji želite koristiti.

Zaključujemo naš rad malo stilizirani. Svi naši naslovi u gornjem primjeru, će biti postavljeni u cijelom širinom ekrana. I oni će se gotovo sav raspoloživ prostor.

Budući da ćemo staviti sve naše slova na sredini ekrana, a zatim, za naše posudu i moramo i flexbox.

Ovdje je primjer svoj kod.

Sada smo učinili da sva slova, koji su umotana u span class, koji spada u roditeljske klase .os-fraze, nalazit će se i da će biti priključen na njega u sredini.

Nemojte zaboraviti da dodate malo slobodnog prostora, što je samo po sebi razmak između slova.

U ovom slučaju, prvi omotač bih da imam neke dodatne osobine. Ova nekretnina perspektive. To će nam omogućiti kako bi bili sigurni da će ovaj sajt biti kao da se izdvaja, dolaze do izražaja.

Sebe kao naša pisma će biti transparentan, a mi ćemo pokrenuti niz animacija za njih negdje u 5,2 sekunde. Ispod - primjer kod.

Takođe je važno da se utvrdi kako i sa kojim zakašnjenjem će se pojaviti naš rečenice i fraze. Koji je od dijelova teksta će se pojaviti brže od prethodne, i koliko. Kod će izgledati ovako.

Neka nam daju male, ali vrlo zanimljiv efekat. Postavite neprozirnost od 0,2. tako Interalphabetic udaljenost će biti prilično velika. Pisma će se rotirati za nekoliko osi Y. Vidimo se, kao i korisnici vaše stranice će biti samo mali dio tih pisama. Također, ne zaboravite da daju efekat svojstva teksta-shadow. Pola animacije, napravili smo neobičnu stvar. Mi ćemo usmjeriti slova sebe, ali i da se smanji udaljenost koju je između njih, a zatim povećati neprozirnost, a nakon povernom znakova na 0 za osi Y.

Na kraju, još jednom smo dodali nekoliko slova ili ugroženih promasshtabiruem njih. To će dati novi mali efekt zamućenja.

I na kraju prošle fraza CSS-animacije.

I da, na kraju dodajte završni dodir. Mi ćemo se fokusirati na neke specifične riječi. Oni će imati podebljan. To će dati potrebne naglasak.

Ne zaboravite inspiracije

Kada pokušate eksperimentirati sami sa osobinama i CSS animacije, pokušati pronaći inspiraciju u svemu u svakodnevnom životu. To može biti bilo šta od zanimljivu web stranica na neke divne video efekat.

Osim toga, ako ne budem radoznao, kako se to radi ili tom smislu, i pokušati da ponovo sami, možete postići odlične rezultate. Ili, u najmanju ruku, uvijek naučiti nešto više o mogućnostima programskog jezika da ste, u stvari, koristite ga. Čak ni u potpunosti shvatila svoju ideju može i dokazati da bude vrlo spektakularno.