Animationer på en webbsida kan locka fler användare. Fråga dig själv detta - om du skulle se en webbsida som har en hel del animation, skulle du inte vilja utforska mer? Nu, med CSS-övergångar kan du göra ditt arbete levande med några fantastiska animationer. Och kom ihåg att dessa måste göras rätt. Låt oss utforska världen av CSS-övergångar i följande ordning:
- Varför CSS-övergångar?
- Övergångsfastigheten
- Vad behöver du specificera?
- Funktionen Egenskap för övergångs-timing-funktion
- Transition-Delay Property
Varför CSS-övergångar?
Låt oss ta en instans. Om du skulle ändra färgen på ett element från vitt till blått är denna förändring nästan omedelbar. För en mer animerad effekt kan du få denna förändring att ske gradvis. Detta ser också ganska visuellt tilltalande ut. Genom att aktivera CSS-övergångar kan du anpassa hur ändringarna sker. Du kan definiera hur förändringarna i element inträffar vid specifika tidsintervall som följer en accelerationskurva.
Med CSS-övergångar kan du definiera ändringarna för element, de specifika tidsintervallen, hastigheten på accelerationskurvan och mycket mer. Du kan göra allt detta utan att använda Flash eller JavaScript .
För en bättre förståelse kan du hänvisa till bilden nedan:
I bilden ovan kommer HTML-elementet att ändras från rött till blått på en sekund. Du ser också mellanfärgen när övergången äger rum. Om du inte ska använda CSS-övergångar kommer du att märka att färgförändringen från rött till blått är omedelbart - du ser inte mellanfärgen. Med CSS-övergångar kommer du att märka en animerad effekt när HTML-elementen ändras från det gamla till det nya.
Övergångsfastigheten
Du kan använda egenskapen stenografisk övergång för att styra CSS-övergångar. Användningen av denna stenografi är inte bara lätt, men det kan också undvika parametrar som inte kan synkroniseras som kan vara ganska frustrerande att felsöka i CSS.
Övergångsegenskapen anger de CSS-egenskaper som du vill ha övergångseffekten till. Endast dessa CSS-egenskaper är animerade.
Syntax:
övergång:
Som nybörjare kan du få problem med att använda stenografi. Om du tycker att det är lite komplext att använda stenografi just nu kan du ange övergångsegenskaperna separat. För ett HTML-element kan du ange övergångsegenskaperna en efter en som visas i exemplet nedan:
div {bredd: 100px höjd: 100px bakgrund: ljusblå övergångsegenskap: bredd övergångs varaktighet: 2s övergångs-timing-funktion: linjär övergångsfördröjning: 1s} div: svävar {bredd: 300px}Håll muspekaren över lådan
hur man tar skärmdump i selen webdriver med java
I exemplet ovan har vi specificerat egenskaperna (övergångsegenskap, övergångslängd, övergångstidsfunktion och övergångsfördröjning) och deras värden separat. Vi lär oss om dessa övergångsegenskaper inom kort.
c ++ vad är ett namnområde
Vad behöver du specificera?
Det är främst två saker som du måste ange för att skapa CSS-övergångar: CSS-egenskapen som vill lägga till en effekt till och tiden för den effekten.Du måste ha en sak i åtanke - när du inte anger tidsvaraktigheten tar övergången ett standardvärde på 0 , och det kommer inte att ha någon effekt.
Låt oss överväga ett exempel:
Koden nedan definierar en övergångseffekt av breddegenskapen under fem sekunder.
div {bredd: 100px höjd: 100px bakgrund: blå övergång: bredd 5s} div: sväva {bredd: 600px}Flytta markören över div-elementet ovan för att se övergångseffekten.
I koden ovan ser du att när du håller markören över den blå rutan ökar den blå rutan gradvis under en varaktighet av fem sekunder. Du kommer också att märka att när du tar bort markören från den blå rutan kommer den blå rutan att återgå till sin ursprungliga storlek gradvis (inte omedelbart). Du kan också ändra värdena för bredd och tid för att se hur denna övergångsegenskap påverkar HTML-elementet.
Du kan också lägga till övergångseffekten till mer än en egendom. Du kan göra det genom att använda komma för att separera egenskaperna. Låt oss överväga ett exempel:
I koden nedan anges övergångsegenskapen för bredd, höjd och transformation.
div {padding: 15px bredd: 150px höjd: 100px bakgrund: grön övergång: bredd 2s, höjd 2s, transform 2s} div: sväva {bredd: 300px höjd: 200px transform: rotera (360deg)} Hej världen (Hover Over Me)
Med exemplet ovan ser du hur den gröna rutan rör sig när du svävar över rutan.
Vi har endast specificerat egenskapen och tidslängden. Låt oss se de andra parametrarna med olika exempel.
Funktionen Egenskap för övergångs-timing-funktion
Den här egenskapen definierar hastighetskurvan för övergångseffekten. Det kan ta följande värden:
- Lätt värde: Detta är standardvärdet där effekten är långsam i början, sedan snabbare och slutar långsamt.
- Linjärt värde: Denna effekt varierar inte övergångshastigheten - den håller hastigheten konstant från början till slut.
- Lättgörande värde: Denna effekt börjar långsamt.
- Lättgörande värde: Denna effekt har en långsam slut.
- Ease-in-out-värde: Denna effekt har en långsam start såväl som en långsam slut.
- Kubikvärde (n, n, n, n): Du kan ange din egen uppsättning värden i funktionen cubic-bezier.
Koden nedan visar övergångseffekterna för linjära, lätthet, lätthet in, lätthet ut och lätthet in-ut värden.
div {bredd: 100px höjd: 100px bakgrund: rosa övergång: bredd 2s} # div1 {övergång-timing-funktion: linjär} # div2 {övergång-timing-funktion: lätthet} # div3 {övergång-timing-funktion: lätthet in } # div4 {transition-timing-function: ease-out} # div5 {transition-timing-function: ease-in-out} div: hover {width: 300px}Håll muspekaren över div-elementen nedan
linjär
lätthet
lätthet
lätthet
lätthet ut
Transition-Delay Property
Ibland vill du att en animering ska ske efter en viss tid. Med övergångsfördröjningsegenskapen kan du ange fördröjningen för en övergångseffekt. Du kan ange fördröjningen i sekunder.
Låt oss ta ett exempel för att se fördröjningen i övergångseffekten:
div {bredd: 100px höjd: 100px bakgrund: gul övergång: bredd 3s övergångsfördröjning: 1s} div: sväva {bredd: 300px}Håll muspekaren över div-elementet nedan
Notera: Du kan observera att en sekund fördröjning innan effekten börjar
vad är jframe i java
I koden ovan, när du svävar över den gula rutan med markören, kommer du att märka (i en sekund) att det inte finns någon effekt. Efter en väntan på en sekund kommer du att märka effekten.
Med detta kommer vi till ett slut på den här CSS Transitions-artikeln. Du kan lägga till animationer på dina webbsidor nu. Prova dessa exempel.
Kolla in vår som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på bloggen “CSS Transition” så återkommer vi till dig.