HTML5 - Overganger

Overganger tilhører en ny serie effekter som er inkorporert i HTML5 og det kan justeres med CSS3Tidligere måtte denne typen effekter utføres av Javascript ved hjelp av et av de mange bibliotekene og rammene som er tilgjengelige (Mootools, Jquery, etc.), men da den nye standarden ble introdusert, ble slike effekter inkorporert, for eksempel overganger, animasjoner, transformasjoner …
Bruke overganger
Før vi ser hvordan vi bruker en overgang, må vi vite hva det er. Vi vet det når vi bruker en endring med eiendommen : sveve når du holder musen over elementet, tar den umiddelbart stilen som er tilordnet når musen er over den, en overgang er ikke annet enn kontroll over hvordan den endringen skal gjøres, det vil si varigheten av endringen, hastigheten på som skal utføres for å oppnå en effekt som en blanding mellom den gamle og den nye staten.
Vi kan deretter oppsummere at overgangen er overgangen fra en tilstand til en annen i HTML -dokumentet og alle egenskapene som denne endringen kan gjøres med, i det følgende bildet ser vi en starttilstand og en sluttilstand, overgangen er det som skjer Mellom begge.
FORSTØRRE
Overgangseiendommer
La oss se egenskapene og attributtene vi kan bruke til å gjøre en overgang:

• overgangsforsinkelse: Angir en forsinkelse i tidsenhet etter hvilken effektprogrammet starter.
• overgangstid: Angir tidspunktet for hvilken overgangen skal skje.
• overgangseiendom: Angir hvilken eiendom overgangen skal brukes på.
• overgang-timing-funksjon: Angir måten mellomliggende verdier skal behandles under gjennomføringen av overgangen.
• overgang: Det er snarveien som vi kan bruke alle egenskapene til overgangen i en enkelt CSS -erklæring. Det kan oppsummeres som følger: overgang:

Det må vi understreke overgangsforsinkelse Y overgangstid bruk tidsenheter som verdier, så må spesifiseres med s sekunder eller ms milli sekunder.
La oss se et eksempel på hvordan du gjør en overgang for et element i HTML5, la oss se følgende kode:

 Eksempel
Det er mange forskjellige frukttyper - det er over 500 varianter av bananer alene. Når vi legger til de utallige typer epler, appelsiner og annen kjent frukt, står vi overfor tusenvis av valg.

Som vi kan se har vi implementert de forskjellige egenskapene til overgangselementet ved hjelp av prefikset -webkit, dette forsikrer oss om at det vil bli oppfylt for nettlesere Chrome Y Safari, å implementere dem for Firefox Y Opera vi må også inkludere prefiksene -moz og -o.
Vi kan også legge merke til at vi setter forsinkelse i 100 ms, noe som betyr at det vil ha en liten forsinkelse før overgangen starter, så skal hele varigheten av effekten vare 500 ms, som er det som er etablert i varighet.
La oss se et bilde med alle fasene av effekten:
FORSTØRRE
Som vi kan se, får overgangen effekten til å gjelde gradvis i løpet av den angitte tiden.
Med dette fullfører vi opplæringen om hvordan du bruker overgangseffekten på et element i HTML5, må vi fortsette å øve til det blir naturlig å plassere den nødvendige koden slik at dokumentene og sidene våre oppnår større dynamikk.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng