Den här artikeln visar processen att lägga till flerstegsanimationer och övergångar.
Hur använder man flerstegsanimationer och övergångar?
För att göra en flerstegsanimering genereras en serie nyckelbildrutor. Den anger serien av ändringar som ska tillämpas på det valda HTML-elementet. Varje nyckelbildruta representerar ett annat tillstånd för animeringen, och webbläsaren överför smidigt elementet mellan dessa tillstånd. Vid övergångar, ange smidig ändring av CSS-egenskaper under en angiven varaktighet genom användarinteraktioner eller tillståndsändringar.
Låt oss gå igenom ett praktiskt exempel för bättre förståelse:
Exempel 1: Använda flerstegsanimering
I det här exemplet kommer en flerstegsanimering att tillämpas på det valda HTML-elementet. Besök demonstrationen nedan:
< stil >
.animationExample {
bredd: 130px;
höjd: 130px;
bakgrundsfärg: skogsgrön;
position: relativ;
animation: moveAnimate 4s ease-in-out oändlig;
}
< / stil >
< kropp >
< div klass = 'animationsexempel' >< / div >
< / kropp >
I kodavsnittet ovan:
- Först, klassen som heter ' animationExempel ' väljs i '
'-tagg. - Därefter värdena för ' 130 pixlar ' är tilldelade ' höjd ' och ' bredd ' egenskaper.
- Ställ dessutom in ' skog grön ' och ' relativ ' som ett värde för ' bakgrundsfärg ' och ' placera ” egenskaper för att förbättra visualiseringen.
- Efter det använder du ' animation ' egenskap och ställ in den lika med ' moveAnimate 4s lätta-in-ut oändligt ” för att applicera animationer.
- Värdet består av fyra delar, den första är den anpassade namnanimeringen, den andra är tidslängden att slutföra, den tredje är typen av animering och den fjärde är gränsen för hur många gånger den här animeringen kommer att gälla.
- Till slut, skapa ett HTML-element och tilldela ' animationExempel 'klass till det.
Använd nu ' nyckelbildrutor ' regel för att definiera den anpassade ' flyttaAnimera ' animation:
@ moveAnimera nyckelbildrutor {0 % {
vänster: 0 ;
bakgrundsfärg: blå;
}
femtio % {
vänster: 200px;
bakgrundsfärg: skogsgrön;
transformera: rotera ( 180 grader ) ;
}
100 % {
vänster: 0 ;
bakgrundsfärg: blå;
}
}
I ovanstående kodblock:
- Först, ' @nyckelrutor ”-blocket skapas tillsammans med namnet på den anpassade animeringen som kommer att definieras.
- Skapa sedan ett block med namnet ' 0 % ” som tillämpar CSS-stilar i början av animeringen. Och använd ' bakgrundsfärg ' och ' vänster ” CSS-egenskaper.
- Skapa nu ett block som heter och ' femtio% ” för att styla mitt i animationen. Det ger värdena för ' 200 pixlar ”, “ skog grön ' och ' rotera (180 grader) ' till 'vänster', 'bakgrundsfärg' och 'omvandla' egenskaper. Detta gör att det valda elementet kan rotera 200px till vänster.
Efter kompileringen av ovanstående kodblock:
Utdata visar att flerstegsanimeringen har tillämpats på det valda HTML-elementet.
Exempel 2: Tillämpa flerstegsövergång
För att tillämpa flerstegsövergången kan CSS-väljarna användas tillsammans med ' övergång ' fast egendom. Besök koden nedan:
.fade {
opacitet: 1;
övergång: opacitet 1s;
}
.fade:hover {
opacitet: 0;
}
<
/ stil>
<
kropp>
< sid klass = 'blekna' > Håll muspekaren över mig för att se övergången. < / sid >
< / kropp >
Förklaringen av ovanstående kod:
- Först, den anpassade ' blekna ' klass väljs och värdet 1 ges till ' opacitet ' fast egendom. Ställ också in värdet på ' opacitet 1s ' till ' övergång ” CSS-egenskap. Detta ställer in eller tar bort opaciteten under en tidsperiod på ' 1s ”.
- Därefter ' :sväva ”väljaren är tilldelad till ” blekna ' klass. I den är värdet av ' 0 ” är inställd på opacitetsegenskapen.
- Till slut skapas HTML-elementet inuti '
'-taggen och klassen för ' blekna ” är fäst vid den.
Efter slutet av kompileringsfasen ser webbsidan ut så här:
GIF-en visar att den anpassade toningsövergången har tillämpats på det valda HTML-elementet.
Slutsats
Flerstegsanimationerna och övergångarna ger liv åt HTML-webbsidorna genom att lägga till rörelse och visuella effekter. För animering, ' nyckelbildrutor ' används tillsammans med varaktighetsprocenten som ' 0 % 'är början', femtio% ” är mitten, och ” 100 % ” är slutet på animeringens varaktighet. För övergången kan CSS-väljaren användas tillsammans med ' övergång ' klass. Den här artikeln har visat hur man använder flerstegsanimationer och övergångar.