Dizajn stranice uvijek je uključivao vidljivo i nevidljivo. Prvi je implementiran u HTML /CSS formatu, a drugi pomoću javascripta (klijentska strana). Odabir razumnog omjera znači odabir optimalnog vremena za pokretanje web-resursa. U suvremenim informacijskim internetskim prostorima, vrijeme je bitno, a vrijeme izrade stranice - tim više. Zapravo, internetski izvor je ideja koja je više ili manje jasna i formalizirana isprva. Zabrinutost razvojnog inženjera: implementirati ga što je prije moguće u virtualnoj stvarnosti. Čak iu slučajevima u kojima razvojni proces uključuje preradu ideje ili specifikacije, stvaranje vidljivog dijela može se obaviti u većini slučajeva odjednom.

Mogućnosti CSS-pravila

Animacija - nije toliko uobičajena praksa koliko hitna potreba. Ako je funkcionalnost resursa prije bila važna, danas je treba ispravno vizualizirati. Statičke stranice nisu dovoljne da bi odgovarale, posjetitelj bi trebao osjetiti da stranica osjeća svoje djelovanje i adekvatno reagira na njih.

Mogućnosti i mogućnosti za oživljavanje stranica stranice dosta, a nije potrebno trošiti vrijeme na razvoj vlastitog jedinstvenog koda, u pravilu, uvijek je to javascript preglednik, strana klijenta). Sudjelovanje poslužiteljske strane (PHP, Perl, druge platforme) ima manje značenja, iako je, ovisno o specifičnosti zadatka, moguće napraviti animaciju iz daljine, tj. S poslužitelja. CSS animacija - najbolje rješenje kada je potrebno brzo dizajnirati,učinkovit i moderan s minimalnim vremenskim troškovima: Ova ilustracija pokazuje kako je lako implementirati animaciju s jednostavnim CSS pravilima.

Opća sintaksa pravila animacije

Pravilo animacije sastoji se od samo pet (sedam) pozicija: * -name, * -trajanje, * -timing-funkcija, * -odgoda, * -terration-count, * -direction, -stanje stanja; gdje je * naziv pravila - animacija sa ili bez prefiksa preglednika. To je vrlo lako koristiti pravilo. Obično se unos koristi u jednom retku, dijeleći ih s razmakom, usmjeravajući ih prema gore navedenom redoslijedu. Za vjernost, element pravila možete postaviti po elementu. Ako je potrebno, morate navesti prefiks preglednika. U svakom slučaju, animacija u svrhu unakrsnog pregledavanja cjelokupne izvedbe mora biti ispravno testirana.

Prije planiranja korištenja animacije, trebate razmotriti uporabu drugih, jednostavnijih pravila i ideja: tranzicija, transformacija, obični hypf, itd.
Animacija je dobro pravilo, ali s njegovim razvojem, i dalje će morati planirati slijed kadrova, a ako ih ima veliki broj, onda to neće biti baš dobro za preglednik, a za zahtjev programera da korisnik nešto promijeni potrebno je vrijeme.

@keyframes - animacijski okviri

Prije svega, valja napomenuti da se animacija ovdje sastoji od okvira, označenih redoslijedom: od, 10%, 20%, 80%, do. Ovdje od i do početne i završne točke, a između njih je moguće manipulirati brojevima bilo kojim korakom, naravno, u razumnom iznosu iu razumnim granicama. U tom slučaju, @keyframes opacity {} bavi se animacijom svojstava neprozirnosti, za koju se zna da je odgovorna zatransparentnost sadržaja oznaka. Postoji zanimljiva točka: svaki okvir animacije mijenja vrijednost tog svojstva, ali može promijeniti vrijednosti i druga svojstva stila na koji se primjenjuju:
Ovdje su prikazana prva dva koraka animacije: od 10%, ostatak se obavlja na isti način. Prvi korak su izlazne vrijednosti pravila relevantnih za datu animaciju, a sva sljedeća sadrže izmijenjene vrijednosti ovih pravila.

CSS animacija: specifična sintaksa

Pravilo animacije uključuje glavne pozicije:

zapis (izborno ime pravila);

trajanje jednog ciklusa;

privremena funkcija (linearna, jednostavnost, jednostavnost-u, jednostavnost-out, jednostavnost-out, nease-out, cubic-bezier);

kašnjenje početka procesa;

broj ponavljanja.

Ove su pozicije sasvim dovoljne za dobivanje zapanjujućeg učinka. Važno je imati na umu da bilo koja CSS animacija nije sintaksa. Mašta developera temelji se na idejama kupca ili bez njih. Trebali biste izvijestiti (u razvoju okvira): to je zamišljeni "crtić", svi su to radili na stranicama knjige, crtali figure u kutovima, mijenjali ili mijenjali nešto na svakom sljedećem. Brzo pogleda iza ugla, možete vidjeti pokret.

Nedostaci animirane animacije

Baš kao što animirana animacija na uglovima lista ostavlja potrebu za promjenom još jedne (čiste) knjige, u slučaju CSS animacije bit će potrebno redefinirati slijed i sadržaj kadra kad se nešto mora promijeniti. )

Iz tog jednostavnog razloga, ne treba se diviti mnoštvu pravila svakog koraka, primjenjivatimogućnost kombiniranja tih ili drugih pravila po koracima. Sve bi uvijek trebalo jednostavno izmisliti i još jednostavnije zapisati. Važno je razumjeti: svrha CSS-a - pružiti skup jednostavnih pravila za dizajniranje stranica. Što se manje koriste pravila za svaki identifikator ili klasu, to će se manje identificirati i klase. CSS animacija je uvijek ručno izrađena. Čak i kada se koristi sustav za upravljanje web stranicama, dodavanje stranice u animirani element znači njezino vezivanje za specifičnosti područja primjene, osim u slučaju gumba, izbornika ili drugih tradicija. Stvaranje "ljepote" na stranici uvijek je poželjno imati na umu da ćete ga morati promijeniti.

Točke i oblici aplikacije za animaciju

CSS animacija kada lebdi na logotipu tvrtke izvrsno je rješenje. To ne samo da uvijek djeluje, već uvijek čeka gosta, pogotovo prvi put da je posjetio izvor. Nova osoba, novi izgled, svježa ideja - psihologija posjetitelja za njega je najznačajniji resurs.
Koristeći jednostavnu, ali originalnu animaciju logotipa tvrtke i opise njezinih glavnih poslovnih pozicija (robe, usluge, ponude, promocije, popusti itd.), Možete odmah privući novog kupca. CSS animacija teksta je dobar dizajnerski potez, ali se treba 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. Kretanje teksta na zaslonu (uključujući drugu verziju njegove animacije) - ideja je stara, praktična, ali značajno ovisna o tomeopseg web-lokacije. Ako ga ne treba, bolje je da to danas ne spominjemo. Izgled CSS animacije - najpraktičnija, jednostavna i psihološki zahtjevna ideja. Ako ne govorite o izvornim rješenjima, kada pokret miša može ostaviti trag u prozoru preglednika (oznake + pseudo-klasa: lebdjeti), onda je klasična opcija za označavanje proizvoda po izboru kupca, pokazati proizvod na poslu - dobro rješenje.