Css Animație
Proprietatea animație vă permite să animați elementele paginii.
Puteți controla durata animației, repetarea, direcția, tipul mișcării și pașii. Puteți anima orice elemente, inclusiv pseudoelemente.
O condiție prealabilă este prezența unor valori specifice. Proprietățile cu valoarea automată nu sunt animate.
Cod de animație de probă:
muta - numele de animație 15s - durata infinită - repetiția infinită liniară - tipul de mișcare
@keyframes
Animația în sine este setată în interiorul blocului @keyframes. După @frame-cheie, numele animației este specificat, iar apoi în paranteze curbate, pașii ei.
Pașii pot fi specificați prin procente sau cu cuvintele cheie de la și la. În acest pas, puteți schimba funcția animație-sincronizare:
Animație nume-
Folosit pentru a seta numele animației.
Valorile posibile: unul sau mai multe nume de animație. Valoarea implicită este nu.
animație-nume: mutați; - O animație. animație-nume: mișcare, culoarea soarelui; - Două animații, numele sunt specificate printr-o virgulă.
Animație-durată
Durata animației este controlată de proprietatea duratei de animație.
Valorile posibile sunt: timpul în secunde sau milisecunde (ms). În cazul mai multor animații, timpul pentru fiecare animație poate fi specificat cu o virgulă. Valoarea inițială este 0s.
Animație-sincronizare-funcție
Proprietatea determină tipul de animație.
Smooth animație ușurință - alunecare (valoare implicită) liniară - mișcare netedă ușurință în acțiune - accelerare spre sfârșitul ușurinței - accelerare la începutul ușurării în sus - mai ușoară decât ușor
cubic-bezier (număr, număr, număr, număr) vă permite să specificați un tip complex de animație. Valorile sunt convenabil selectate la cubic-bezier.com.
Step-start și step-step animație pas-cu-pas vă permit să specificați pas-cu-pas de animație, trebuie să specificați pașii specifici. În acest caz, începutul pasului are loc la începutul pasului, iar la sfârșitul pasului - la final.
pas-end. Dacă setați pornirea pasului. contorul va începe cu unul.
pași (număr) - vă permite să specificați numărul de pași pentru care va fi efectuată animația și puteți specifica doar ultima etapă fără a fi necesar să specificați pașii intermediari.
Animație-iterație-count
Controlează repetarea animației. Valoarea implicită este 1 (animația este redată o singură dată).
număr - de câte ori să jucați animația. infinit - repetiție infinită.
Animation-direcție
Responsabil de direcția animației.
normal - animația este redată în direcția obișnuită, de la început până la sfârșit. invers - animația joacă în direcția opusă, adică de la capăt. alternativă - animația este redată de la început până la sfârșit, apoi în direcția opusă. alternate-reverse - animația este redată de la capăt la început și apoi în direcția opusă.
Animație-play-stat
Controlează oprirea și redarea animației.
Valorile posibile: rularea - este redată animația (valoarea implicită). întrerupt - animația se blochează în primul pas.
Controlați pasul în care oprirea nu va funcționa, dar puteți opri animația prin: hover:
Animație întârziere
Cu întârziere de animație, puteți seta întârzierea animației înainte de a începe redarea.
Valorile posibile sunt: timpul în secunde sau milisecunde (ms). Valorile pot fi negative. În cazul mai multor animații, timpul pentru fiecare animație poate fi specificat cu o virgulă. Valoarea inițială este 0s.
Animație-fill-mode
Proprietatea determină dacă animația va afecta elementul din afara timpului de redare al animației.
nici una - animația afectează elementul numai în timpul redării, la sfârșitul elementului revine la starea inițială. înainte - animația afectează elementul de la sfârșitul redării. înapoi - animația afectează elementul înainte de începerea redării. atât animația afectează elementul înainte și după redare.
Pentru a vedea cum funcționează înainte și în amândouă înainte de începerea animației, este specificată o întârziere de animație: 3s; De asemenea, este logic să deschideți un exemplu într-o fereastră nouă.
Toate aceste proprietăți pot fi scrise cu ajutorul unei înregistrări scurte, de exemplu:
Valorile necesare sunt numele animației și durata. Prima valoare dată este considerată durata de redare, a doua este întârzierea.
Trimiteți-le prietenilor: