CSS animacija: primjeri i ilustracije

Dizajn stranice uvijek je uključivao vidljivo i nevidljivo. Prvi je implementiran u HTML / CSS formatu, drugi po JavaScriptu (klijentska strana). Odabir razumnog omjera znači odabrati optimalno vrijeme za pokretanje web-resursa.

U suvremenom informacijskom internetskom prostoru, vrijeme je od suštinskog značaja, a vrijeme izrade web stranice je još više. Zapravo, internetski izvor je ideja koja je više ili manje jasna i formalizirana u početku. Developer care: što je prije moguće prevesti ga u virtualnu stvarnost. Čak iu slučajevima kada je razvojni proces povezan s usavršavanjem ideje ili tehničkog zadatka, stvaranje vidljivog dijela može se obaviti u većini slučajeva odjednom.

Značajke pravila za CSS

Animacija nije toliko uobičajena praksa koliko hitna potreba. Ako je ranija funkcionalnost resursa bila važna, danas bi trebala biti vizualno ispravno dizajnirana. Statičke stranice nikome ne odgovaraju, posjetitelj bi trebao osjetiti da site osjeća njegove akcije i na njih adekvatno reagira.

Postoji mnogo mogućnosti i opcija za revitalizaciju stranica web-lokacije i uopće nije potrebno trošiti vrijeme na izradu vlastitog jedinstvenog koda, što u pravilu uvijek uključuje JavaScript (preglednik, klijentska strana). Uključenost poslužiteljske strane (PHP, Perl, druge platforme) je manje važna, iako, ovisno o specifičnostima zadatka, možete napraviti animaciju s udaljenosti, tj. S poslužitelja.

CSS Animation je najbolje rješenje kada je potrebno napraviti dizajn brzo, učinkovito i moderno uz minimalno vrijeme:

Ova ilustracija pokazuje kako je lako implementirati animaciju s jednostavnim CSS pravilima.

Opća sintaksa pravila animacije

Pravilo animacije je samo pet (sedam) pozicija: * -name, * -trajanje, * -timing-funkcija, * -odgoda, * -itration-count, * -direction,--play-state; gdje je * naziv pravila - animacija sa ili bez prefiksa preglednika.

Upotreba pravila je vrlo jednostavna. Obično se koristi jedan unos retka, razdvajajući vrijednosti s razmakom, označavajući ih gore navedenim redoslijedom. Za vjernost, element pravila možete postaviti po elementu. Ako je potrebno, navedite prefiks preglednika. U svakom slučaju, animacija za kompatibilnost između različitih preglednika i opća izvedba trebaju biti ispravno testirani.

Prije planiranja korištenja animacije razmotrite mogućnost primjene drugih, jednostavnijih pravila i ideja: tranzicija, transformacija, regularni gif itd.

Animacija je dobro pravilo, ali u razvoju je još uvijek potrebno planirati niz kadrova, a ako ih ima mnogo, to neće biti previše dobro za preglednik, a za razvojnog inženjera potražnja korisnika za promjenom trebat će vremena.

@keyframes - okviri animacije

Prije svega, treba napomenuti da je animacija ovdje sastavljena od okvira označenih redoslijedom: od, 10%, 20%, ... 80%, do. Ovdje od i do je početna i završna točka, a između njih možete manipulirati brojevima sa svakim korakom, naravno, u razumnom iznosu i razumnim granicama.

U tom slučaju, @keyframes opacity {...} adresira animaciju na svojstvo neprozirnosti, koje je, kao što znate, odgovorno za transparentnost sadržaja oznake. Postoji zanimljiva točka: svaki okvir animacije mijenja vrijednost ovog svojstva, ali također može promijeniti vrijednosti drugih svojstava stila na koji se primjenjuje:

Ovdje su prikazana prva dva koraka animacije: od i 10%, ostatak se obavlja na isti način. Prvi korak su izvorne vrijednosti pravila koja su relevantna za ovu animaciju, a svi sljedeći sadržavaju modificirane vrijednosti tih pravila.

CSS Animacija: Specifična sintaksa

Pravilo animacije uključuje glavne položaje:

• notacija (neobavezno ime pravila);
• trajanje jednog ciklusa;
• privremena funkcija (linearna, lakoća, lakoća, lakoća, lakoća, ne-izlaz, kubna-bezier);
• odgoditi početak postupka;
• broj ponavljanja.

Ove pozicije su dovoljne da dobiju nevjerojatan učinak.

Važno je imati na umu da bilo koja CSS animacija nije sintaksa. To je razvojna mašta koja se temelji na idejama kupca ili bez njih.

Trebao bi biti svjestan (u razvoju kadrova): govorimo o nacrtanom "crtanom filmu", svatko je to ikada radio na stranicama knjige, crtajući u kutovima figura, mijenjajući ili mijenjajući nešto na sljedećem. Brzo se pomičete kroz kut, možete vidjeti pokret.

Nedostaci "rukom crtane" animacije

Kao iu stvarnosti, nacrtana animacija na uglovima listova knjige zahtijeva promjenu druge (prazne) knjige, tako da ćete u slučaju CSS animacije morati ponoviti redoslijed i sadržaj kadra kad nešto treba promijeniti.

Iz tog jednostavnog razloga, ne treba se uključivati ​​u mnoštvo pravila svakog koraka, koristiti mogućnost kombiniranja jednog ili drugog pravila po korak. Sve bi uvijek trebalo biti vrlo jednostavno izmišljeno i još jednostavnije napisano.

Važno je razumjeti: svrha CSS-a je pružiti skup jednostavnih pravila za dizajn stranica. Što se manje pravila koristi za svaki identifikator ili klasu, to su manji identifikatori i klase stvoreni.

CSS animacija je uvijek ručni rad. Čak i kada koristite sustav za upravljanje web stranicama, dodavanje stranice s animiranim elementom znači da je vezano za specifičnosti područja primjene, ako ne govorimo o gumbima, izbornicima ili drugim tradicijama.

Stvarajući "ljepotu" na stranici, uvijek je poželjno imati na umu da ćete je morati promijeniti.

Točke i oblici aplikacije za animaciju

на логотип компании - отличное решение. CSS animacija kada pokazuje na logotip tvrtke je izvrsno rješenje. Ovo ne samo da uvijek djeluje, već i gost uvijek čeka, pogotovo prvi put posjetom resursu. Nova osoba, novi izgled, svježe mišljenje - psihologija posjetitelja je njegov najznačajniji resurs.

Korištenjem jednostavnog, ali originalnog, animiranog logotipa tvrtke i opisa njegovih glavnih pozicija u poslu (roba, usluga, metoda opskrbe, promocije, popusti, itd.) Možete odmah privući novog klijenta.

CSS animacija teksta je dobar dizajnerski potez, ali treba je koristiti kada nije moguće primijeniti uobičajene značajke izgleda ili ograničiti maštu. Na primjer, oznaka oznake s nizom pravila za CSS.

Pokretanje teksta na zaslonu (uključujući i drugu verziju njegove animacije) je stara, praktična ideja, ali značajno ovisi o opsegu stranice. Ako to nije potrebno, bolje je da se o tome danas ne sjećate.

Izgled CSS animacija je najpraktičnija, jednostavna i psihološki tražena ideja. Ako ne govorite o izvornim rješenjima, kada pokret miša može ostaviti oznaku u prozoru preglednika (oznake + pseudo-klasa: lebdjeti), onda je klasična opcija označavanja proizvoda koju je odabrao klijent, pokazati proizvod u radu ... je dobro rješenje.

Glatki izgled elemenata stranice nije toliko, ali je postao popularan zbog općeg trenda dinamike graditeljstva gradilišta u cjelini. AJAX tehnologija čini stranice dinamičnim. Sadržaj se ne učitava u cijelosti, ali dolazi do preglednika posjetitelja u dijelovima. Dobar razlog za korištenje učinka manifestacije.

Gumb za animaciju. CSS je upravo napravljen za to. Još nije postojao koder i, u velikoj mjeri, čak i PHP ili JavaScript programer (specijalizacije vrlo daleko od pravila CSS-a) koji ne bi proveli nekoliko dana u stvaranju vlastitog remek-djela s znakovima animacije, ili elementom na kojem klasik , ali još uvijek dodirujući Pozdrav svijetu, ja sam gumb!

Tema gumba je svakako zanimljiva. Međutim, rasprostranjeno širenje mobilnih i drugih uređaja na koje još nije moguće povezati miša, sugerira da animirate temu gumba u praktičnoj inteligenciji.

Najbolji opseg CSS-animacije i dalje je sljedeći: naziv i opseg poduzeća, njegovih usluga, proizvoda i pozicija u odnosu na klijenta.