Zasnova mesta je vedno vključevala vidno in nevidno. Prva je bila izvedena s postavitvijo HTML /CSS, druga z uporabo javascripta (odjemalske strani). Izbira primernega razmerja pomeni izbiro optimalnega časa za zagon spletnega vira. V sodobnih informacijskih internetnih prostorih je čas bistvenega pomena, čas razvoja mesta pa še bolj. Pravzaprav je internetni vir ideja, ki je bolj ali manj jasna in formalizirana. Skrb delodajalca: uvesti jo čim prej v virtualni realnosti. Tudi v primerih, ko razvojni proces vključuje izpopolnitev ideje ali specifikacije, lahko ustvarjanje vidnega dela poteka v večini primerov hkrati.

Možnosti CSS-pravil

Animacija - ni toliko običajna praksa kot nujna potreba. Če je bila funkcionalnost vira prej pomembna, jo je treba danes ustrezno vizualizirati. Statične strani ne zadoščajo, obiskovalec mora čutiti, da spletno mesto čuti svoja dejanja in se ustrezno odzivati ​​nanje.

Priložnosti in možnosti za oživitev strani mesta precej, in ni potrebno, da bi porabili čas za razvoj lastne edinstvene kode, praviloma, vedno je javascript brskalnik, stranko). Udeležba strežniške strani (PHP, Perl, druge platforme) je manj pomembna, čeprav je glede na specifičnost naloge mogoče narediti animacijo iz oddaljenosti, torej iz strežnika. CSS animacija - najboljša rešitev za hitro oblikovanje,učinkovito in moderno z minimalnimi časovnimi izdatki: Ta ilustracija prikazuje, kako enostavno je izvajati animacijo s preprostimi pravili CSS.

Splošna sintaksa za pravila animacije

Pravilo animacije je sestavljeno samo iz petih (sedmih) položajev: * -ime, * -trajanja, * -timing-funkcije, * -odlaganja, * -terration-count, * -direction, * -stanje stanja; pri čemer je * ime pravila - animacija z ali brez predpone brskalnika. Pravilo je zelo enostavno uporabiti. Običajno uporabijo vnos v eni vrstici, pri čemer vrednosti delijo s presledkom in jih usmerijo v zgornji vrstni red. Za zanesljivost lahko nastavite element pravila za element. Po potrebi morate določiti predpono brskalnika. V vsakem primeru mora biti animacija za namen navzkrižnega brskanja celotne uspešnosti pravilno preizkušena.

Pred načrtovanjem uporabe animacije je treba razmisliti o uporabi drugih, enostavnejših pravil in idej: prehod, transformacija, navadni hypf itd.
Animacija je dobro pravilo, vendar bo z razvojem še vedno morala načrtovati zaporedje okvirov, če pa jih je veliko, potem ne bo zelo dobro za brskalnik in za zahtevo razvijalca, da stranka nekaj spremeni, bo potreben čas.

@keyframes - animacijski okvirji

Najprej je treba opozoriti, da animacija tukaj sestoji iz okvirjev, ki jih označuje zaporedje: od, 10%, 20%, 80% do. Tukaj od in do začetnih in končnih točk, med njimi pa je mogoče manipulirati s številkami s katerim koli korakom, seveda v razumnem znesku in v razumnih mejah. V tem primeru @keyframes opacity {} naslavlja animacijo lastnosti motnosti, za katero je znano, da je odgovorna zapreglednost vsebine oznak. Obstaja zanimiva točka: vsak animacijski okvir spremeni vrednost te lastnosti, lahko pa spremeni vrednosti in druge lastnosti sloga, za katerega je uporabljen:
Tukaj so prikazana prva dva koraka animacije: od 10%, ostalo je na enak način. Prvi korak so izhodne vrednosti pravil, ki se nanašajo na dano animacijo, vse naslednje vsebujejo spremenjene vrednosti teh pravil.

CSS animacija: posebna skladnja

Pravilo animacije vključuje glavna mesta:

zapis (po želji ime pravila);

trajanje enega cikla;

začasna funkcija (linearna, enostavna, enostavna, enostavna, enostavna, ne-out, kubična-bezier);

zamuda začetka postopka;

število ponovitev.

Ta mesta so povsem dovolj, da dobijo osupljiv učinek. Pomembno je vedeti, da vsaka animacija CSS ni sintaksa. Domišljija razvijalca, ki temelji na idejah kupca ali brez njih. Morate poročati (pri razvoju okvirjev): to je slika "risanke", to so vsi naredili na straneh knjige, risali figure v kotih, spreminjali ali spreminjali nekaj na vsakem naslednjem. Hitro pogledal za vogalom, lahko vidite gibanje.

Slabosti animirane animacije

Tako kot animirana animacija na vogalih listov knjige zahteva spremembo druge (čiste) knjige, v primeru animacije CSS pa bo treba ponovno opredeliti zaporedje in vsebino okvirjev, ko bo treba nekaj spremeniti. )

Iz tega preprostega razloga ne bi smeli občudovati številnih pravil vsakega korakasposobnost kombiniranja teh ali drugih pravil po korakih. Vse mora biti vedno preprosto izumljeno in še bolj preprosto zapisano. Pomembno je razumeti: namen CSS - zagotoviti niz preprostih pravil za oblikovanje strani. Manj ko bodo uporabljena pravila za vsak identifikator ali razred, manj bo identifikatorjev in razredov, kar bo bolje. CSS animacija je vedno ročno izdelana. Tudi pri uporabi sistema za upravljanje spletnih strani dodajanje spletnega mesta animiranemu elementu pomeni njegovo vezavo na posebnosti področja uporabe, razen če gre za gumbe, menije ali druge tradicije. Ustvarjanje "lepote" na strani, je vedno priporočljivo, da ne pozabite, da boste morali spremeniti.

Točke in oblike aplikacije za animacijo

Animacija CSS, ko lebdite na logotipu podjetja, je odlična rešitev. To ne le vedno deluje, ampak vedno čaka na gosta, še posebej prvič obiskan vir. Nova oseba, nov videz, sveža ideja - psihologija obiskovalca je za njega najpomembnejši vir.
Z enostavno, vendar izvirno animacijo logotipa podjetja in opisi njegovih glavnih poslovnih položajev (blago, storitve, ponudbe, promocije, popusti itd.) Lahko takoj pritegnete nove stranke. CSS animacija besedila je dober oblikovalski premik, vendar ga je treba uporabiti, kadar ni mogoče uporabiti običajnih postavitev ali pa omejujejo domišljijo. Na primer, oznaka oznake z nizom pravil CSS. Gibanje besedila na zaslonu (vključno z drugo različico njegove animacije) - ideja je stara, praktična, vendar bistveno odvisna odpodročja uporabe. Če ga ne potrebuje, je bolje, da ga danes ne omenjamo. Videz CSS animacije - najbolj praktična, enostavna in psihološko zahtevna ideja. Če ne govorite o izvirnih rešitvah, ko lahko miško gibanje pusti sled v oknu brskalnika (oznake + psevdo-razred: hover), potem je klasična možnost, da označite izdelek, ki ga je izbral kupec, pokazal izdelek pri delu - dobra rešitev. Gladkost elementov strani ni tako velika, ampak je postala povpraševanje zaradi splošnega trenda dinamizacije področja gradnje lokacij na splošno. Tehnologija AJAX naredi strani dinamične. Vsebina se ne prenese, ampak pride do obiskovalčevega brskalnika v delih. Dober razlog za uporabo učinka manifestacije. Gumb za animacijo. CSS je pravkar ustvaril za to. Še vedno ni bilo nobenega namestitvenega in še posebej velikega PHP razvijalca ali javascript specializacije, ki je zelo daleč od pravil CSS), ki ne bi porabila nekaj dni za ustvarjanje lastne mojstrovine, ki ima znake animacije ali elementa, klik na katerega je klasično življenje. , ampak še vedno se premikajo Hello world, jaz sem gumb! Tema gumba je vsekakor zanimiva. Vendar pa razširjena uporaba mobilnih in drugih naprav, s katerimi še ni mogoče povezati miške, zagotavlja animacijo teme gumba v mejah praktične modrosti. Najboljša uporaba animacije CSS je še vedno: ime in obseg podjetja, njegove storitve, blago in položaj v odnosu do stranke.