animație css pentru incepatori
Elemente de animație face nu numai design-ul simplu și elegant, dar, de asemenea, oferă utilizatorilor emoțiile pozitive care atrag literalmente la site-ul.
Atât de mult pentru valorile personalizate.
Trebuie să te avertizez - înainte de a lua pe elementele de animație, aveți nevoie pentru a învăța elementele de bază ale HTML si CSS
Principalele componente ale animației CSS - proprietăți de tranziție și de animație. și în general @keyframes.
Să le ia în considerare în ordine.
tranziție
proprietate de tranziție este utilizat pentru a crea simple animații, adică, creează efectul unei tranziții între două state membre.
tranziție, la rândul lor, pot fi împărțite în patru componente, fiecare dintre care afectează un aspect specific al efectului de tranziție.
1. tranziție-proprietate - specifică proprietatea care va fi animată. De exemplu, în cazul în care elementul va fi mutat, acesta va fi proprietățile sus, stânga, marja, etc modifica dimensiunea, lățime sau înălțime, schimba culoarea - .. culoare sau de fundal.
2. tranziție-durată - durata efectului de tranziție. Este în câteva secunde.
3. tranziție-sincronizare-funcție - viteza efectului de tranziție. Este nevoie de următoarele valori:
ușura - animație începe încet, apoi accelerat și încetinit din nou spre sfârșitul anului;
ușurința în - start lent și până la sfârșitul anului accelerate;
ușurința-out - start rapid, iar sfârșitul este încetinit;
ușurința în-out - o încetinire la începutul și la sfârșitul anului;
liniar - viteză constantă;
Cubic-Bezier - setează toate valorile din punct de vedere numeric. De exemplu, o valoare ușurință este scris ca: cub-bezier (0.25,0.1,0.25,1).
4. tranziție întârziere - pornirea cu întârziere a animației. Specificat în secunde. Cum ar fi de animație poate începe într-un anumit interval de timp după încărcare a paginii.
Versiunea prescurtată a înregistrării de animație este după cum urmează - în proprietate de tranziție este setată la toate valorile de mai sus în ordine printr-un spațiu.
Un exemplu în care elementul este mutat cu cursorul mouse-ului este.
animație și @keyframes
animație de proprietate și @keyframes folosit de obicei pentru a crea o animație de orice complexitate.
proprietate animație specifică setările de acțiune pentru animație (durata animație, repetiție, direcția, tipul de mișcare, trepte), iar blocul in sine este dat @keyframes animație pas cu pas (schimbarea tipului și poziția)
proprietate de animație include opt componente:
1. animație nume - numele animației. este stabilit în mod arbitrar. Este necesar, în scopul de a determina animație în blocul @keyframes. deoarece mai multe animație pot fi definite pentru un singur element.
2. animație durată - durata animației este dată în secunde (s) și milisecunde (ms).
3. animație-sincronizare-funcție - determină tipul de animație și ia următoarele valori:
ușurința - alunecare;
liniar - mișcare lină;
ușurința-out - la începutul accelerației;
ușurința în - accelerarea la sfârșitul anului;
ușurința în-out - o alunecare lină decât ușurință
Cubic-Bezier - setează parametrii numerici permit să pună în aplicare tipuri mai complexe de animație. Un instrument pentru selectarea parametrilor numerici - cubic-bezier.com
pas cu pas de început și-end - specifică pas cu pas de animație (număr)
pași - specifică numărul de pași pentru care animația (cronometru - trepte (60) animație durată -60s) vor fi efectuate
4. animație-iterație-count - specifică numărul de repetiții ale animației. Este nevoie de valorile:
Orice număr - de câte ori se repetă de animație;
infinit - repetiție fără sfârșit;
5. Animation-direcție - definește direcția de mișcare. Este nevoie de valorile:
normală - mișcarea de la stânga la dreapta;
inversa - mișcarea de la dreapta la stânga;
supleant - un ciclu complet de înainte și înapoi;
alternativă inversă - un ciclu complet, dar începe și se termină cu sfârșitul;
6. animație-play-stat - specifică oprește animație. Este nevoie de valorile:
de rulare - animația se execută în mod normal (implicit);
întrerupt - animația se oprește la primul pas;
7. animație întârziere - specifică întârzierea înainte de redarea de animație. Determinat în secunde (s) și milisecunde (ms)
8. animație-fill-mode - vă permite să redați animația este specificat timpul de redare. Este nevoie de valorile:
nici unul - animație funcționează numai în timpul de redare specificat, apoi revine la locul faptei.
forward - animație continuă după timpul de reproducere;
înapoi - animația începe să înceapă redarea;
atât - animația se execută la începutul și la sfârșitul timpului de joc;
Unele dintre aceste proprietăți poate părea absurd la început, dar atunci când creați animații complexe, care le permit să realizeze îndrăznețe soluții creative.
Toate proprietățile pot fi scrise într-o formă prescurtată, specificând proprietatea de animație doar valorile lor. De exemplu:
@keyframes Articolul - al doilea pas în crearea de animații complexe.
In interiorul acestei reguli creează o redare transformări pe etape care apar cu elementul.
În practică, este după cum urmează: în selectorul stylesheet creat @keyframes în care sunt plasate selectori secvențial definesc stat membru.
De exemplu, să ia elementul
, cere-i o formă pătrată, de culoare de fundal, și pentru a face modificările de culoare de la complet transparentă la complet opacă.Selectori este setat la și de la o transformare de la un stat la celălalt element.
Dar este mult mai convenabil pentru a specifica o schimbare de stat în procente. Apoi, numărul de selectoare poate fi crescută, nimicind astfel procesul într-un număr mai mare de etape.
Fiecare etapă poate fi stabilită în același timp ceva propriu lor. De exemplu, durata, de frontieră, dimensiunea, etc.
Un exemplu de apariția și dispariția pătrat:
Sperăm că elementele de bază de a crea animație clare. Acum, că știți caracteristicile, valorile și instrumentele, Notepad ++ deschis și de a crea de la simplu la complex.
În următorul articol «mișcare CSS, prin rotație, 3D» vedea exact transforma proprietatea, fara nici un cost care, aproape nici o animație.
Hai, ceea ce este mai interesant