HTML5 - Overgange

Overgange hører til en ny række effekter, der er indarbejdet i HTML5 og det kan justeres med CSS3Tidligere skulle denne type effekter udføres af Javascript ved hjælp af et af de mange tilgængelige biblioteker og rammer (Mootools, Jquery osv.), Men da den nye standard blev introduceret, blev sådanne effekter inkorporeret, såsom overgange, animationer, transformationer …
Brug af overgange
Inden vi ser, hvordan vi bruger en overgang, skal vi vide, hvad det er. Det ved vi, når vi anvender en ændring med ejendommen : svæve når musen holdes over elementet, tager den straks den stil, der er tildelt, når musen er over den, en overgang er ikke mere end kontrol over, hvordan denne ændring skal foretages, det vil sige varigheden af ​​ændringen, hastigheden ved som vil blive udført for at opnå en effekt som en blanding mellem den gamle og den nye tilstand.
Vi kan derefter opsummere, at overgangen er overgangen fra en tilstand til en anden inden for HTML -dokumentet og alle de egenskaber, som denne ændring kan foretages med, i det følgende billede ser vi en starttilstand og en sidste tilstand, overgangen er hvad der sker Mellem begge.
FORSTØRRE
Overgangsejendomme
Lad os se de egenskaber og attributter, som vi kan bruge til at foretage en overgang:

• overgangsforsinkelse: Angiver en forsinkelse i tidsenhed, hvorefter effektprogrammet starter.
• overgangstid: Angiver det tidspunkt, hvor overgangen skal finde sted.
• overgangsejendom: Angiver hvilken ejendom overgangen skal anvendes på.
• overgang-timing-funktion: Angiver den måde, mellemliggende værdier vil blive behandlet under udførelsen af ​​overgangen.
• overgang: Det er den genvej, hvormed vi kan anvende alle egenskaberne ved overgangen i en enkelt CSS -erklæring. Det kan opsummeres som følger: overgang:

Det må vi understrege overgangsforsinkelse Y overgangstid brug tidsenheder som værdier, så skal specificeres med s sekunder eller Frk milli sekunder.
Lad os se et eksempel på, hvordan man laver en overgang til et element i HTML5, lad os se følgende kode:

 Eksempel
Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.

Som vi kan se, har vi implementeret de forskellige egenskaber ved overgangselementet ved hjælp af præfikset -webkit, dette forsikrer os om, at det vil blive opfyldt for browsere Chrome Y Safari, at implementere dem for Firefox Y Opera vi skal også inkludere præfikserne -moz og -o.
Vi kan også bemærke, at vi har indstillet forsinke i 100 ms, hvilket betyder, at det vil have en lille forsinkelse, før overgangen startes, så skal hele effektens varighed vare 500 ms, hvilket er det, der er fastlagt i varighed.
Lad os se et billede med alle faser af effekten:
FORSTØRRE
Som vi kan se, får overgangen effekten gradvist til at gælde i løbet af den angivne tid.
Med dette afslutter vi selvstudiet om, hvordan man anvender overgangseffekten på et element i HTML5, skal vi fortsætte med at øve, indtil det bliver naturligt at placere den nødvendige kode, så vores dokumenter og sider opnår større dynamik.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt