Animație în css, lecții, webreference

Am văzut recent că tranziția - acesta este doar un mod de proprietăți de stil de animație de la inițială la starea finală.

Deci, în CSS tranzițiile sunt un tip specific de animație, în cazul în care:

  • există doar două stări: începutul și sfârșitul;
  • animație nu este buclată;
  • stări intermediare sunt controlate de doar o funcție de timp.

Dar ce se întâmplă dacă doriți să:

  • au control asupra statelor intermediare?
  • animație buclă?
  • face diferite tipuri de animații pentru un singur element?
  • pentru a anima anumite proprietate este doar jumătate de drum?
  • simula diferite în funcție de timp pentru proprietăți diferite?

Animație CSS permite toate acestea și multe altele.

Animație ca un mini-film, unde ca regizor dau instrucțiuni (de regulă de stil) actorii dvs. (elemente de HTML) pentru diferite scene (keyframes).

proprietăți de animație

Ca tranziție. proprietate de animație este o abreviere pentru alte câteva:

  • animație nume. numele animației;
  • animație-durată. cât timp animație;
  • animație-sincronizare-funcție. ca intermediari de stat calculat;
  • animație întârziere. animație începe după un timp;
  • animație-iterație-count. de câte ori animația urmează să fie efectuate;
  • animație direcție. mișcarea trebuie să meargă în direcția opusă sau nu;
  • animație-fill-mode. ce stiluri sunt aplicate înainte de începerea animație, și după finalizarea acestuia.

Un exemplu rapid

Pentru a revitaliza butonul de descărcare, puteți scrie o animație viguros:

Mai întâi trebuie să scrie o animație reală viguros folosind @keyframes si denumeste-l viguros. Apoi, puteți utiliza această animație, aplicând-o la butonul de încărcare.

Am folosit caracteristica de animație scurt și a inclus toate opțiunile posibile:

  • animație nume: Bouncing (același nume ca și cadre cheie)
  • animație Durata: 0.5s (o jumătate de secundă)
  • animație-sincronizare-funcție: cub-bezier (0.1,0.25,0.1,1)
  • animație-întârziere: 0s (fără întârziere)
  • animație-iteratie-conta: infinit (infinit reprodus)
  • animație direcție: alternativă (merge înainte și înapoi)
  • animație-fill-mode: ambele

@keyframes

Înainte de a aplica animație la elementele de HTML, aveți nevoie pentru a scrie animația folosind keyframes. În general, cadrele cheie - este fiecare pas intermediar în animație. Acestea sunt determinate cu ajutorul de interes:

  • 0% - primul pas de animație;
  • 50% - o mutare la jumătatea drumului animație;
  • 100% - ultimul pas.

Puteți utiliza, de asemenea, cuvinte cheie de la și la, în loc de 0% și 100%, respectiv.

Puteți defini cât mai multe cadre cheie doriți, cum ar fi de 33%, 4% sau chiar 29.86%. În practică, veți scrie doar o parte din ele.

Fiecare cadru cheie este o regulă CSS. Acest lucru înseamnă că puteți scrie proprietățile CSS, ca de obicei.

Pentru a determina animație, pur și simplu scrie @keyframes cuvinte cheie la numele său:

Rețineți că începutul sfârșitului de 0% și 100% conțin aceleași reguli CSS. Acest lucru asigură că voința bucla de animație perfect. Deoarece contorul de iterații este setat ca infinit. animația va merge de la 0% la 100%, și apoi imediat înapoi la 0%, și așa mai departe pentru totdeauna.

animație nume-

Numele animației este utilizat cel puțin de două ori:

  • atunci când scrieți animație folosind @keframes;
  • utilizând proprietățile de animație prin animație nume (sau proprietatea animație prescurtat).

La fel ca numele claselor CSS, numele animației poate include numai:

Numele nu poate începe cu o cifră sau două liniuțe.

animație durată

Deoarece durata tranziției. animația poate fi setată în secunde (1s) sau milisecunde (200ms).

Valoarea implicită este 0s, ceea ce înseamnă că nici o animație, la toate.

animație-sincronizare-funcție

Ca o funcție de timp pentru tranziție. o funcție de timp pentru animație poate utiliza cuvinte cheie. cum ar fi liniară. ușurința, sau pot fi determinate prin curbe Bezier arbitrare.

Valoare implicită: usurinta.

Deoarece animația în CSS folosește keyframes, puteți seta o funcție liniară de timp și de a simula curba specifică Bezier, determinarea unui număr de cadre cheie foarte specifice. Uita-te Bounce.js pentru a crea animație avansate.

animație întârziere

Ca și în cazul în care întârzierea de tranziție. întârziere de animație poate fi setat în secunde (1s) sau milisecunde (200ms).

Valoarea implicită este 0s, ceea ce înseamnă absența oricărei întârzieri.

Utile atunci când mai multe animații este inclus în serie.

animație-iterație-count

În mod implicit, animația este jucat doar o singură dată (la 1). Puteți seta trei tipuri de valori:

  • sunt numere întregi, cum ar fi 2 sau 3;
  • numere de fracționare, cum ar fi de 0,5, care vor fi redate doar jumătate din animație;
  • cuvinte cheie infinit. care se va repeta animația pe termen nelimitat.

animație direcția

Animație-direcție proprietate determină ordinea în care pentru a citi cadrele cheie.

  • normale. Se pornește de la 0%, final la 100%, pornind de la 0% din nou.
  • inversă. începe de la 100%, care se încheie la 0%, începe de la 100% din nou.
  • supleant. Acesta începe de la 0%, ajungând până la 100% revine la 0%.
  • alternativ- inversă. începe de la 100%, ajungând la 0% revine la 100%.

Este mai ușor de imaginat în cazul în care iterațiile de animație contra este setat la infinit.

animație-fill-mode

Proprietatea de animație-fill-mode determină ceea ce se întâmplă înainte de începerea animație, și după finalizarea acestuia.

Pentru a determina cadrele cheie poate specifica reguli CSS. care va fi aplicat la diferite etape ale animației. Acum, aceste reguli CSS se pot confrunta cu cei care au aplicat deja la elementele animatable.

animație-fill-mode vă permite să spun browser-ului în cazul în care animatsiitakzhe stiluri care urmează să fie aplicate în afara animației.

Să ne imaginăm un buton. care este:

  • Implicit roșu;
  • Se pare albastru la începutul animație;
  • și în cele din urmă verde. când animația este completă.