HTML5 - Övergångar

Övergångar tillhör en ny serie effekter som införlivas i HTML5 och det kan justeras med CSS3Tidigare måste denna typ av effekter utföras av Javascript med hjälp av ett av de många bibliotek och ramverk som finns (Mootools, Jquery, etc.), men när den nya standarden introducerades införlivades sådana effekter, såsom övergångar, animationer, transformationer …
Använda övergångar
Innan vi ser hur vi använder en övergång måste vi veta vad det är. Vi vet det när vi tillämpar en ändring med fastigheten : sväva när du håller musen över elementet, tar det omedelbart den stil som tilldelats när musen är över den, en övergång är inget annat än kontroll över hur den ändringen kommer att göras, det vill säga varaktigheten av ändringen, hastigheten vid som kommer att utföras, för att uppnå en effekt som en blandning mellan det gamla och det nya tillståndet.
Vi kan då sammanfatta att övergången är övergången från ett tillstånd till ett annat inom HTML -dokumentet och alla egenskaper som denna ändring kan göras med, i följande bild ser vi ett initialtillstånd och ett slutligt tillstånd, övergången är vad som händer Mellan båda.
FÖRSTORA
Övergångsegenskaper
Låt oss se de egenskaper och attribut som vi kan använda för att göra en övergång:

• övergångsfördröjning: Anger en fördröjning i tidsenhet efter vilken effektprogrammet startar.
• Övergångsperiod: Anger den tid för vilken övergången ska ske.
• övergångsfastighet: Anger vilken egenskap övergången ska tillämpas.
• övergång-timing-funktion: Anger hur mellanliggande värden ska behandlas under utförandet av övergången.
• övergång: Det är genvägen med vilken vi kan tillämpa alla övergångens egenskaper i en enda CSS -deklaration. Det kan sammanfattas enligt följande: övergång:

Det måste vi betona övergångsfördröjning Y Övergångsperiod använd tidsenheter som värden, så måste anges med s sekunder eller Fröken milli sekunder.
Låt oss se ett exempel på hur man gör en övergång för ett element i HTML5, låt oss se följande kod:

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

Som vi kan se har vi implementerat de olika egenskaperna hos övergångselementet med prefixet -webkit, detta försäkrar oss att det kommer att uppfyllas för webbläsare Krom Y Safari, att implementera dem för Firefox Y Opera vi måste också inkludera prefixen -moz och -o.
Vi kan också märka att vi ställer in dröjsmål i 100 ms vilket innebär att det kommer att ha en liten fördröjning innan övergången startar, då bör hela effekten på effekten vara 500 ms vilket är det som fastställs i varaktighet.
Låt oss se en bild med alla faser av effekten:
FÖRSTORA
Som vi kan se gör övergången att effekten tillämpas gradvis under den angivna tiden.
Med detta avslutar vi handledningen om hur man överför effekt på ett element i HTML5, måste vi fortsätta öva tills det blir naturligt att placera den kod som krävs så att våra dokument och sidor uppnår större dynamik.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng