HTML5 - Tranziții

Tranzițiile aparțin unei noi serii de efecte care sunt încorporate în HTML5 și care poate fi ajustat cu CSS3Anterior, acest tip de efecte trebuia să fie realizat de Javascript folosind una dintre numeroasele biblioteci și cadre disponibile (Mootools, Jquery etc.), dar când a fost introdus noul standard, astfel de efecte au fost încorporate, cum ar fi tranziții, animații, transformări .
Folosind tranziții
Înainte de a vedea cum să folosim o tranziție, trebuie să știm ce este. Știm asta atunci când aplicăm o modificare cu proprietatea : pluteste când plasați mouse-ul peste element, acesta ia imediat stilul atribuit când mouse-ul este deasupra lui, o tranziție nu este altceva decât controlul asupra modului în care va fi făcută această modificare, adică durata schimbării, viteza la care va fi realizat, pentru a obține un efect ca un amestec între starea veche și cea nouă.
Putem rezuma atunci că tranziția este trecerea de la o stare la alta în cadrul documentului HTML și toate proprietățile cu care se poate face această modificare, în imaginea următoare vedem o stare inițială și o stare finală, tranziția este ceea ce se întâmplă Între amândouă.
MARI
Proprietăți de tranziție
Să vedem proprietățile și atributele pe care le putem folosi pentru a face o tranziție:

• întârziere de tranziție: Specifică o întârziere în unitatea de timp după care va începe aplicarea efectului.
• durata tranziției: Specifică timpul pentru care urmează să aibă loc tranziția.
• proprietate de tranziție: Specifică ce proprietate trebuie aplicată tranziția.
• funcție-temporizare-tranziție: Specifică modul în care valorile intermediare vor fi tratate în timpul executării tranziției.
• tranziție: Este comanda rapidă cu care putem aplica toate proprietățile tranziției într-o singură declarație CSS. Acesta poate fi rezumat după cum urmează: tranziție:

Trebuie să subliniem că întârziere de tranziție Da durata tranziției folosiți unități de timp ca valori, deci trebuie specificate cu s secunde sau Domnișoară milli secunde.
Să vedem un exemplu de cum să faci o tranziție pentru un element din HTML5, să vedem următorul cod:

 Exemplu
Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.

După cum putem vedea, am implementat diferitele proprietăți ale elementului de tranziție folosind prefixul -webkit, acest lucru ne asigură că va fi îndeplinit pentru browsere Crom Da Safari, pentru a le implementa pentru Firefox Da Operă trebuie să includem și prefixele -moz și -o.
De asemenea, putem observa că am setat întârziere în 100ms ceea ce înseamnă că va avea o mică întârziere înainte de a începe tranziția, apoi întreaga durată a efectului ar trebui să dureze 500ms, ceea ce este stabilit în durată.
Să vedem o imagine cu toate fazele efectului:
MARI
După cum putem vedea, tranziția face ca efectul să se aplice treptat în timpul specificat.
Cu aceasta încheiem tutorialul despre cum se aplică efectul de tranziție unui element din HTML5, trebuie să continuăm să practicăm până când devine natural să plasăm codul necesar, astfel încât documentele și paginile noastre să atingă un dinamism mai mare.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv