În crearea de animație, nu numai că vă puteți limita la programe speciale, dar puteți utiliza capabilitățile tabelului de cascadă CSS3. Folosind cunoștințele și imaginația ta, poți desena efecte în animația CSS fără a folosi orice add-on-uri. Mai ales animația CSS este o modalitate bună de a impresiona utilizatorii cu destinația de plasare corectă. Cu ajutorul animației CSS puteți face aproape orice mutare, text, imagine, forme arbitrare și orice altceva care vine în minte.
Pentru a susține animația, toate browserele populare utilizează o proprietate non-standard, un prefix. Este indicat la începutul liniei de către fiecare browser separat.
Internet Explorer 10 acceptă fără prefix. Browserul Opera recunoaște prefixul -webkit, astfel încât să nu puteți utiliza opțiunea -o-.
Cadrul inițial al animației.
Utilizați proprietatea @keyframes pentru a crea un cadru de animație inițial pe care doriți să îl legați de un anumit selector. Apoi specificați cel puțin două acțiuni:
- numele animației
- durata animației
Notă: Dacă durata animației nu este specificată, nu se va întâmpla nicio acțiune deoarece, în mod implicit, este zero.
Cum funcționează animația CSS?
Animația vă permite să vă deplasați de la un stil la altul, în timp ce le schimbați ușor. Puteți schimba multe elemente, și cel mai important - în mod repetat, ori de câte ori este necesar. Tranziția de animație este indicată în procente de la 0% la 100% sau prin cuvinte cheie de la "de la" la "la".
Exemple de animație în logo.
Poate că această aplicație nu este adesea găsită în designul web, cu excepția excepției din videoclipurile promoționale. Dar va fi foarte interesant pentru ochi și poate inspira creația slabă a logo-ului.