CSS är ett av de mest kraftfulla sätten att göra webbsidan interaktiv. Det förvandlar utseendet och känslan av vår bas webbsida. En av de viktiga och spännande funktionerna som CSS erbjuder är att den låter oss utföra animationer. Det gör att vi kan flytta elementen på vår sida. Låt oss börja vår Journey of Animations i CSS i följande ordning:
Animationer i CSS
Att lägga till animationer på vår webbplats är ett utmärkt sätt att uppmärksamma användarna. Det ger inte bara värde till vår sida utan berikar också användarupplevelsen. Animationen i CSS bygger på två delar. Dom är
- Keyframes
- Animation
CSS-animationerna stöds i alla webbläsare. Vissa äldre webbläsare som Safari (upp till version 8.0) kräver dock prefix (-webkit-) för att tolka animationsegenskaperna. Till exempel:
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% -webkit-animation-name: cssanim / * gamla webbläsare * / -webkit-animation-varaktighet: 5s / * gamla webbläsare * / animation -namn: cssanim animation-varaktighet: 5s} / * gamla webbläsare * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Vi kan använda html-exemplet från ovan och ersätta CSS-koden i stiltaggen för att testa ytterligare exempel.
Keyframes i CSS
Detta är byggstenen för animationer i CSS. Den definierade specifika ögonblick och stilar av animationen på vår webbsida. Med andra ord, när vi anger @ keyframes inuti vår CSS, får det kontrollen att ändra det aktuella tillståndet till ett nytt tillstånd eller animera objekten under en viss varaktighet.
@ Keyframes måste ha vissa egenskaper för att styra animeringen, t.ex. namnet på animationen, scener och egenskaper.
namn - Ett namn krävs för varje animation för att beskriva dess beteende.
Stadier - Scenen representerar slutförandet av en animering. Det kan göras antingen med nyckelordet 'till' och 'från' eller i procent, medan 0% representerar början och 100% representerar sluttillståndet för en animering. Fördelen med att använda den procentuella representationen är att vi kan definiera flera mellansteg däremellan, dvs. vad som ska vara beteendet för animering vid 50% -steg eller 75% etc.
Egenskaper - Dessa egenskaper ger oss kontroll över @keyframes för att manipulera dem under animationen.
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% animeringsnamn: cssanim animationsvaraktighet: 5s} @ keyframes cssanim {0% {transform: skala (0.5) opacitet: 0} 50 % {transform: skala (1.5) opacitet: 1} 100% {transform: skala (1)}}Nu eftersom vi är klara om att definiera nyckelbilder. Låt oss utforska animationsegenskaper för att beskriva hur vi kan animera våra element och objekt. De två egenskaperna, dvs. ärva och initiala, kan användas med alla animationstyper. Dessa egenskaper används vanligtvis tillsammans med div-taggen för att uppvisa olika beteenden.
första: Ställer in den här egenskapen till standardvärdet.
ärva: Ärver den här egenskapen från dess överordnade element.
vilken skannerklassmetod läser en sträng
Animeringsegenskaper
- animationsnamn
Den anger namnet på animationen, som används i @keyframes för att manipulera.De möjliga värdena är:
- namn: Detta anger namnet som ska bindas till nyckelbilden för animering.
- ingen: Detta är standardvärdet och kan användas för att åsidosätta de ärvda eller kaskad animationerna.
Syntax:
animationsnamn: namn | ingen | initial | ärva
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% animeringsnamn: cssanim animationsvaraktighet: 5s} @ keyframes cssanim {0% {vänster: 0px} 100% {vänster: 300px} }- animation-varaktighet
Den anger den tid det tar för en animering att slutföra en körning. Den definieras i sekunder eller millisekunder (t.ex. 4s eller 400ms). Standardvärdet för den här egenskapen är 0s, så om den här egenskapen inte anges kommer animeringen inte att ske.
Syntax:
animation-varaktighet: tid
.anim {höjd: 200px bredd: 200px bakgrund: blå position: relativ kantradie: 100% animeringsnamn: cssanim animationsvaraktighet: 4s} @ keyframes cssanim {0% {transform: skala (0.4) opacitet: 0} 50 % {transform: skala (1.4) opacitet: 1} 100% {transform: skala (1)}}- animeringsfördröjning
Egenskapen animationsfördröjning låter oss ange fördröjningen i animeringen. Den definierar när en animationssekvens ska startas.
Värdet på den här egenskapen kan deklareras i antingen sekunder eller millisekunder. Det kan innehålla både positiva och negativa värden. Ett positivt värde indikerar att animeringen startar efter den angivna tiden och tills dess kommer den att förbli unanimerad. Å andra sidan startar ett negativt värde omedelbart animeringen från punkten som om den redan har körts under en viss tidsram.
Syntax:
animationsfördröjning: tid
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% animeringsnamn: cssanim animationsvaraktighet: 4s animeringsfördröjning: 4s} @ keyframes cssanim {0% {vänster: 0px} 100% {vänster: 250px}}- animation-iteration-count
Den här egenskapen anger hur många gånger en animationssekvens ska spelas. Standardvärdet för den här egenskapen är 1.De möjliga värdena är:
- siffra - anger antalet iterationer
- oändlig - indikerar att animationen ska upprepas för alltid
Syntax:
animation-iteration-count: antal | oändlig
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% animeringsnamn: cssanim animation-varaktighet: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {kvar: 100 pixlar}}- animeringsriktning
Den definierar riktningen för animeringen. Elementets riktning kan ställas in för att spela framåt, bakåt eller i alternativa cykler.Standardvärdet för den här egenskapen är normalt och återställs för varje cykel.De möjliga värdena är:
vanligt - Detta är standardbeteendet och animationen spelas framåt. Efter varje cykel kommer animationen till sitt ursprungliga läge och spelas framåt igen
omvänd - Animationen spelas bakåt. Efter varje cykel kommer animationen till sitt slutläge och spelas bakåt
alternativ - Animationens riktning är omvänd, dvs den spelar först framåt och sedan bakåt i varje cykel. Varje udda cykel gör animering framåt och varje jämn cykel ger bakåtrörelse.
alternativ-omvänd - Animationens riktning växlas omväxlande. Här spelas animationen bakåt först och sedan framåt i varje cykel. Varje udda cykel rör sig bakåt eller bakåt och varje jämn cykel gör animering framåt.
Syntax:
animeringsriktning: normal | omvänd |alternativ | alternativ-omvänd
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% animeringsnamn: cssanim animationsvaraktighet: 2s animation-iteration-count: oändlig} @ keyframes cssanim {0% {vänster: 0px} 100% {kvar: 100 pixlar}}- animering-timing-funktion
Den här egenskapen bestämmer hastighetskurvan eller animationens rörelsestil. Det har tilldelats att göra ändringen i animeringsstilen smidigt från en form till en annan. Om inget värde tilldelas är det som standard att underlätta.De möjliga värdena för animering-timing-funktionen är:
lätthet - Detta är standardvärdet för fastigheten. Här börjar animationen långsamt, blir gradvis snabb i mitten och hamnar sedan långsamt igen.
linjär - Animationen håller samma hastighet under hela cykeln, dvs från början till slut.
hur man konverterar sträng till datum i java
lätthet - Animationen börjar långsamt.
lätthet - Animationen slutar långsamt.
lätthet ut - Animationen rör sig långsamt både under start och slut.
cubic-bezier (n, n, n, n) - Den här avancerade funktionen låter oss skapa en anpassad timingfunktion genom att definiera våra egna värden. Det möjliga värdet varierar från 0 till 1.
Syntax:
animation-timing-funktion: linjär | lätthet | lätthet | lätthet | enkel in-ut |cubic-bezier (n, n, n, n)
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% animationsnamn: cssanim animationsvaraktighet: 2s animeringsriktning: omvänd} @ keyframes cssanim {0% {bakgrund: orange vänster: 0px } 50% {bakgrund: gul vänster: 200 pixlar överst: 200 pixlar} 100% {bakgrund: blå vänster: 100 pixlar}}- animation-fill-mode
Detta är en speciell egenskap eftersom den bestämmer animeringsstilen före eller efter att animationen spelas.Som standard påverkas inte elementets stil av animeringen före början eller efter att den slutar. Den här egenskapen är användbar eftersom den hjälper till att åsidosätta animationens standardbeteende.Följande är möjliga värden för egenskapen animation-fill-mode:
ingen - Detta är standardvärdet för egenskapen, dvs animeringsstilarna tillämpas inte på elementet, före eller efter animationen.
framåt - Stilarna behålls av elementet i den slutliga animationssekvensen, dvs. efter att animeringen är klar.
bakåt - Stilarna behålls av elementet i den ursprungliga animationssekvensen, dvs. innan animeringen stirras, särskilt under animationsfördröjningen.
både - Detta betyder att animeringen kommer att följa i både riktningen, dvs. framåt och bakåt
Syntax:
animation-fill-mode: none | framåt | bakåt | både
.anim {bredd: 50px höjd: 50px bakgrund: ljusblå färg: vit font-vikt: fet position: relativ animationsnamn: cssanim animation-varaktighet: 5s animation-iteration-count: oändlig gränsradie: 100%} # anim1 { animation-timing-funktion: lätthet} # anim2 {animation-timing-funktion: linjär} # anim3 {animation-timing-funktion: lätthet-in} # anim4 {animering-timing-funktion: lätthet} # anim5 {animation- timing-funktion: lätt-in-ut} @ keyframes cssanim {från {vänster: 0px} till {vänster: 400px}}- animation-play-state
Den här egenskapen anger att en animering ska vara antingen i uppspelning eller pausat tillstånd. När en animering återupptas från paus börjar den också från den den lämnade.De möjliga värdena är:
- spelar - För att göra animationen igång
- pausad - För att göra animeringen i pausläge.
Syntax:
animation-play-state: pausad | spelar
.anim {bredd: 100px höjd: 100px bakgrund: ljusblå position: relativ animeringsnamn: cssanim animation-varaktighet: 3s animeringsfördröjning: 2s animering-fyllningsläge: bakåtgränsradie: 100%} @ keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animation
Detta är känt som animations-stenografi-egenskapen. Den används för renare kod. När vi väl är vana vid alla animeringsegenskaper rekommenderas det att vi använder animeringsförkortningen för att koda snabbare och definiera alla egenskaper i en enda rad.
hur man vänder ett heltal i python
Syntax:
animation: [animationsnamn] | [animation-varaktighet] | [animation-timing-funktion] |[animationsfördröjning] | [animation-iteration-count] | [animeringsriktning] |[animation-fill-mode] | [animation-play-state]
Alla animeringseffekter som vi visar ovan med olika animationsegenskaper kan uppnås med hjälp av stenografianimation fast egendom.
.anim {höjd: 200px bredd: 200px bakgrund: ljusblå position: relativ kantradie: 100% animeringsnamn: cssanim animationsvaraktighet: 2s animeringsriktning: normal animation-play-state: pausad} @keyframes cssanim {0% {bakgrund: orange topp: 0px} 50% {bakgrund: gul vänster: 200px topp: 200px} 100% {bakgrund: blå vänster: 100px}}Detta avslutar alla animeringsegenskaper som kan användas i CSS. Vi bör prova olika variationer av dessa egenskaper för att få en tydligare bild. När vi blir bekväma kan egenskapen animering stenografi vara till stor hjälp för att skriva renare och snabbare kod. Detta är en av de viktiga färdigheterna att lära sig i CSS för webbutvecklare. Eftersom vi tenderar att fokusera mer på rörliga objekt snarare än statiska, kan animationer hjälpa oss att uppnå det och också utveckla fantastiska webbsidor.
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 'Animationer i CSS' så återkommer vi till dig.