animație css - proprietate de animație, far SEO

animație CSS - proprietate de animație

Astăzi vom crea o animație prin intermediul unui alt limbaj de programare numit CSS.

Pentru incepatori, aș spune că limbajul CSS (engleza Cascading Style Sheets, traduse Cascading Style Sheets.) - o limbă pentru a descrie aspectul paginilor web. Ce înseamnă? Și asta înseamnă că, folosind limbajul care formează aspectul orice site.

Prin CSS, putem lucra pe orice element de pagină, fie că este vorba de text sau o imagine, putem muta în orice direcție sau vopsea în culoarea dorită.

potențial CSS este cu adevărat nelimitate, și cu eliberarea de CSS3 (CSS a treia generație) posibilitatea de a face obiecte de a muta în timp real, cu o varietate de moduri.

În acest articol ne vom uita la proprietatea unică de animație CSS3 și de obicei @keyframes. Dar ne lăsa în ordine. Să mergem!

animatii bazate pe CSS

CSS blocuri de animație sunt: ​​proprietate de animație și de regulă @keyframes.

@keyframes - unica regula CSS3 permite stabilirea cadre succesive de animație.

proprietate de animație reglează fluxul de animație. Ce vreau să spun prin cuvântul „hranei pentru animale“, veți înțelege mai târziu.

Deci, din nou ticker:

După cum se poate observa din exemplul ilustrativ, folosind instrucțiunile CSS de mai sus le-am primit pentru a muta textul de la stânga la dreapta, și cu o rată de non-uniformă. După aceea, textul se întoarce la poziția sa inițială, iar animația este redat mai întâi.

Acum, să vedem modul în care animație de proprietate și regula @keyframes

proprietate de animație pot fi împărțite în câteva proprietăți:

animație nume - specifică numele animației;
animație durată - specifică durata în secunde de animație (e) și milisecunde (ms);
animație-sincronizare-funcție - setează valoarea vitezei de animație;
animație-iterație-count - specifică numărul de repetiții ale animației;
animație direcția - determină direcția de animație;
animație-play-stat - specifică starea animației atunci când cursorul;
animație temporizare - determină intervalul de întârziere înainte de animație în s și ms;
animație-fill-mode - setează poziția elementului înainte și după animație.

Puțin mai târziu, vom examina fiecare proprietate în detaliu, dar acum te-am cunoștință doar cu instrumente de bază.

@keyframes regulă

Așa cum am menționat mai sus, regula stabilește cadre @keyframes succesive de animație. Este timpul pentru a explica modul în care regula.

numele - numele animației;
de la - starea inițială a elementului;
la - starea finală a elementului.

Dar este posibil și într-un alt mod:

Acum să analizăm în detaliu toate proprietățile de animație.

animație de familie Proprietăți

Pentru a facilita asimilarea materialului, după descrierea fiecărei proprietăți, voi aduce un exemplu viu.

Deci, ia textul, de exemplu, „linia Beguschaa“ și a pus acest lucru în clasa HTML pentru el:

Mai mult, în fișierul style.css pentru clasa a generat prevede următoarele proprietăți de animație:

Mai jos, vom scrie o regulă de animație:

Înainte să vă arăt ce sa întâmplat în cele din urmă, să analizăm în detaliu ceea ce suntem comandat.

animație nume: test; - am întrebat numele testului de animație;
animație durată: 4s; - am cerut animație în 4 secunde;
animație-iteratie-count: infinit; - caracteristică interesantă cu care putem seta numărul de repetiții de animație, (infinit - „infinit“, tradus din limba engleză). De asemenea, valoarea numerică a repetări poate fi setat în această proprietate, de exemplu: 1 - o repetiție (implicit), 2 - două repetiții, etc.

testul @keyframes - aici am numit test de animație, de obicei, asociat cu proprietățile sale @keyframes animație.
de la - set poziția inițială în pixeli trei-line de la marginea paginii din stânga.
pentru a - poziția țintă în rândul și șase sute de pixeli de la marginea paginii din stânga.

Ca rezultat, vom obține următorul efect:

crește ușor textul și adăugați niște culoare:

Acum, haideți să aruncăm o privire mai atentă la o altă proprietate, care este foarte importantă, deoarece este responsabil pentru viteza de circulație a subiectului și poate lua pe mai multe semnificații:

Proprietatea de animație-sincronizare-funcție

animație-sincronizare-funcție: usurinta; - alunecare (implicit) În exemplul de mai sus nu am folosi proprietatea de animație-calendarul-funcție, dar, de fapt, ea a lucrat și valoarea el a avut doar ușurință, și, prin urmare, nu o viteză uniformă.

Proprietatea de animație-sincronizare-funcție poate lua mai multe valori, du-te prin fiecare dintre ele.

animație-sincronizare-funcție: ușurința în-out; - mai buna alunecare;

animație-sincronizare-funcție: liniară; - viteză uniformă;

animație-sincronizare-funcție: ușurința în; - accelerarea sfârșitul animației;

animație-sincronizare-funcție: ușurința-out; - accelerarea la începutul animației;

animație-sincronizare-funcție: cub-bezier; (.chislo număr număr număr.) - Folosind această valoare, puteți specifica efectul unei mișcări multidirecțional a animației:

cub-bezier (0.22, 1.47. 26, -0.49)

animație-sincronizare-funcție: pas-start; - aceasta este valoarea vreau să fac detaliile și să vă arate o altă regulă @keyframes:

După cum puteți vedea o regulă @keyframes poate lua valoarea în%, ceea ce este foarte convenabil atunci când creați animații. Deci, cu valorile date ale etapelor pot fi redate utilizând un pas de pornire.

Dacă te uiți atent la acest exemplu, putem vedea că valoarea pasului de pornire este sărit primul pas al animației.

animație-sincronizare-funcție: pas-end; - în cazul în care pas-end trece pasul final al animației.

animație-sincronizare-funcție: etapele (număr); - măsuri pentru a simplifica pas cu pas valoarea de animație. Consolele pot înregistra pur și simplu numărul de pași și @keyframes set de reguli pentru prima și ultima etapă.

În aplicarea valorilor etape ultimul pas lipsește.

Cu valorile de mai sus de proprietate de animație-sincronizare-funcție poate fi destul de fin ajusta orice animație. Dă-i drumul.

Proprietatea de animație direcția

Acum ne vom uita la o altă caracteristică interesantă, care se numește animație-direcție și posibile valorile sale.

animație direcție: normal; - un rând de circulație comună de la stânga la dreapta.

animație direcție: inversă; - animație de mișcare de la un capăt la început.

animație direcție: alternativă; - primul animație este jucat în modul normal, și apoi în direcția opusă.

animație direcție: alternativ- inversă; - Animația începe cu sfârșitul anului, este vorba de la început, și apoi mutați în direcția opusă.

Intr-un articol viitor voi da diverse exemple de animație CSS, nu numai linia de rulare, atâta timp cât proprietatea următoare.

Proprietatea de animație întârziere

C folosind proprietăți Animation-întârziere putem seta întârzierea de animație înainte de redare, în secunde sau milisecunde.

animație-întârziere: 0s; - valoarea implicită.

animație-întârziere: 5s; - Acum să ceară o întârziere de 5 secunde.

animație-întârziere: -5S; - Puteți specifica, de asemenea, o valoare negativă întârziere de redare.

Există o altă caracteristică interesantă.

Proprietatea animație-fill-mode

Proprietăți de animație de lucru-fill-mode pot fi observate atunci când se utilizează un anumit număr de cicluri de animație, adică în animație-iterație-count proprietate este necesar să se stabilească o valoare numerică.

Lucrarea este de a determina proprietățile unui cadru cheie, și impactul asupra lui, înainte sau după începerea animației.

În exemplul am stabilit două repetiții și întârziere de animație în 5 secunde, dar pentru a vedea cum funcționează, această proprietate va trebui să reîncărcați pagina.

animație-fill-mode: none; - proprietatea este aplicată primului cadru activ.

animație-fill-mode: înainte; - proprietate se aplică la ultimul cadru activ, și anume, după finalizarea redării, animația rămân la ultimul cadru.

animație-fill-mode: înapoi; - animația se va aplica valorile pentru proprietățile keyframe inițiale, chiar dacă cadrul nu este deja activ.

animație-fill-mode: ambele; Este un fel de soluție complexă. Animație se vor aplica valorile proprietăților primul cadru cheie în redarea începe, și stochează valorile de proprietate ale ultimului cadru cheie după finalizarea animației.

Rămâne ultima proprietate a colecției de animație.

Proprietatea animație-play-stat

Proprietatea poate lua doar două valori:

animație-play-stat: funcționare; - valoarea implicită, redarea de animație are loc în mod normal.

animație-play-stat: întrerupte; - oprire de animație în prima etapă.

In exemplul de mai jos, am folosit o metoda de oprire a animației la planare moment folosind: hover clasa pseudo

proprietăți de animație scris scurt

Pentru a simplifica codul de aspect css, cu condiția ca scrierea prescurtată a tuturor proprietăților de animație într-o singură linie. Ordinea sau secvență este următoarea:

Sper că este clar că numele proprietăților ar trebui să fie înlocuite cu valorile lor și, desigur, parantezele pătrate nu trebuie să se înregistreze. exemplu:

Puteți combina, de asemenea, mai multe animații, enumerarea valorilor de proprietate separate prin virgulă:

Desigur, pentru fiecare nume, animația trebuie să fie scris @keyframes reguli separate.

Compatibilitate cross-browser

Presupun că trebuie să explicăm mai întâi conceptul de „compatibilitate cross-browser“ în sine.

Sfat! Compatibilitate cross-browser - afișarea corectă a site-ului în toate browserele populare.

Nimic complicat aici, doar pentru fiecare versiune de browser furnizor există anumite prefixe.

-webkit-animație: valoare; - Browser: Chrome, Safari, iOS;
-Moz-animație: valoare; - pentru browser-ul Firefox;
-o-animație: valoare; - browser-ul Opera;
-ms-animație: valoare; - pentru Internet Explorer.

Într-adevăr, unele proprietăți CSS3 nu funcționează fără versiunea furnizor de prefixe, deci verificați afișarea animației în toate browserele populare și adăugați prefixe, dacă este necesar.

De fapt, linia de rulare, și o proprietate de animație, animație CSS nu este limitată în viitor, vom reveni la acest subiect, astfel încât abona la blog actualizări.

De asemenea, într-un articol separat, ne vom uita la toate posibilele exemple de animații CSS.

Cu stimă, Vitaly Kirillov