Ge dina webbsidor liv med CSS-animationer och övergångar

Webbplatsdesigner utvecklas ständigt. Från responsiv design, vacker typografi, perfekta färgkodningsscheman, illustrationer, kommer webbplatsskaparna med nya idéer och design varje dag.

Användare nuförtiden har höga förväntningar på användargränssnitten på grund av sådant högkvalitativt innehåll som är tillgängligt över internet. I takt med att webbplatsens gränssnitt utvecklas så är tekniken bakom dem. En viktig komponent som är ansvarig för att förbättra webbplatsens gränssnitt är CSS.

CSS eller Cascading Style Sheets är ansvariga för att göra webbplatser mycket interaktiva genom att definiera deras stil, layout, design. Den senaste standarden för CSS, det vill säga CSS3 har introducerat konceptet med animationer och transformationer som förbättrar användarupplevelsen genom att lägga till extra djup till användargränssnittet. Med CSS-animationer och övergångar kan du berätta historier, skapa överdådiga effekter och göra användarinteraktion med din webbplats mycket effektiv och meningsfull.

En animation är bara en simulering av rörelse som skapas genom att visa en serie objekt som bilder efter varandra. Övergång, å andra sidan, är i grunden en process där ett objekt ändras från ett tillstånd till ett annat. Men när vi pratar om webbanimationer finns det i grunden tre typer – CSS-animationer eller keyframe-animationer, CSS-övergångar och JavaScript-animationer.

CSS-animationer

För att skapa animationer i CSS måste vi ändra CSS-egenskaperna för ett element som en bild eller text, under en viss tidsperiod. Vi kan ändra egenskaperna för element så många gånger vi vill och kan också ställa in varaktigheten för animeringen.

Specificerar @keyframes

CSS-animationer definieras bitvis med nyckelbildrutor. Dessa nyckelbildrutor är de mellanliggande punkterna för animering. Alla CSS-animationer specificeras under @keyframes-regeln. Dessa nyckelbildrutor anger vad som händer med elementet vid ett visst ögonblick, dvs.

• vilka egenskaper som förändras
• när elementet animeras
• hur elementet animerar

Du kan definiera din egen nyckelbildruta som:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Här anger ”till” och ”från” början och slutet av animationen. Vi kan också specificera animationer för mellanliggande ögonblick mellan start och slut så här:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Här representerar 0 % början av animeringen, 100 % representerar slutet av animeringen och 50 % representerar förändringen mellan början och slutet. Men hur berättar vi för webbläsaren hur lång tid animering ska ske? Det gör vi med hjälp av vissa animationsegenskaper. Dessa animeringsegenskaper är associerade med elementet som ska animeras. Till exempel:

element_name
{
animation_property: value;
style_property: value;
}

Här kan elementet vara vilken HTML-tagg som helst som div, span, img, p etc. och style_propertyär vilken CSS-stilegenskap som helst som background_color, width, height etc. Låt oss nu titta på några animationsegenskaper i detalj.

1. @keyframes: Keyframes används för att specificera animeringskoden som diskuterats ovan.
2. animation-name: Namnet som anges med @keyframes är namnet på animationen. Detta namn används för att referera till nyckelbildrutor med elementet som ska animeras.
3. animation-duration: Den används för att ange varaktigheten av animationen i sekunder eller millisekunder. Om vi ​​till exempel ställer in den på 5 sekunder kommer animeringen endast att köras i 5 sekunder. Om vi ​​inte ställer in den här egenskapen kommer animeringen inte att köras alls eftersom dess standardvärde är 0.
4. animation-delay: Vi kan fördröja starten av animeringen genom att ange animationsfördröjningstid. Om du till exempel vill starta animeringen 5 sekunder efter att sidan har laddats i webbläsaren, ställ bara in animationsfördröjning till 5s.
5. animation-direction: Vi kan tala om för webbläsaren om en animation rör sig i motsatt riktning eller omväxlande cykler med den här egenskapen. Om du till exempel vill att animationen ska köras från början till slut, ställ in värdet för animation-duration som ”normalt”. Om du vill att den ska köras från slut till start ställer du bara in värdet på ”omvänd”.
6. animation-fill-mode: Vi kan specificera stilen för elementet när animeringen inte spelar med detta läge, dvs när animeringen är försenad eller avslutad, vad ska stilen på elementet vara.
7. animation-iteration-count: Antalet gånger en animation kan spelas representeras av denna egenskap. Om du till exempel vill spela animationen en gång ställ in den på 1, eller om du vill att animeringen ska spelas för alltid, ställ bara in den på ”oändlig”.
8. animation-timing-function: Den här egenskapen används för att specificera hastighetskurvan för animering som linjär, acceleration eller deacceleration.
9. Animation: Det är förkortningsegenskapen för att ställa in alla animeringsegenskaper.

Du kan till exempel animera ett studsande objekt med följande kodavsnitt. Lägg märke till hur stenografisk notation för animering har använts här.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Övergångar

CSS-övergångar tillämpas på egenskaper hos element under en viss tidsperiod baserat på vissa tidsfunktioner, även förenklingsfunktioner. Med tidsfunktion menar vi en funktion som kommer att ändra egenskaperna hos elementen från ett tillstånd till ett annat som linjär progression, acceleration eller deacceleration. Du kanske har märkt att en bild glider eller förvandlas till en annan bild när du håller muspekaren eller att ett ljud spelas upp vid musklick. Dessa är alla övergångseffekter som kan göra en webbplats interaktiv.

Lättnadsfunktioner är viktiga för att skapa övergångar. De anger hur egenskaperna kommer att förändras. De kan också ändra hastigheten med vilken värdet på fastigheter ändras från startpunkten till slutpunkten för en övergång. Du kan tillämpa övergångar på följande sätt:

element
{
style_property: value;
transition_property: value;
}

Här anger element HTML-elementet du vill transformera som div, H1, img etc. style_property är CSS-stilen som tillämpas på det elementet. Låt oss nu titta på några övergångsegenskaper :

• transition-property: Övergångseffekt kommer alltid att tillämpas på CSS-egenskapen för ett element som dess bredd, höjd, färg eller form. Värdet för detta attribut anger elementets CSS-egenskap. Övergångseffekten kommer att börja när den här egenskapen ändras, till exempel när du håller musen eller klickar.
• transition-timing-function: Detta är lätthetsfunktionen som ska tillämpas på elementet. Den här egenskapen används för att specificera hastighetskurvan för övergången som lätta in, lätta ut, linjär etc.
• transition-duration: Det är precis som animation-duration-egenskapen. Den används för att ange tidslängden för övergångseffekten i sekunder eller millisekunder. Till exempel, om vi ställer in den på 5 sekunder kommer övergången att slutföras inom 5 sekunder. Om vi ​​inte ställer in den här egenskapen kommer det inte att ske någon övergång alls eftersom dess standardvärde är 0.
• transition-delay: Med den här egenskapen kan vi ange tidslängden för att fördröja övergångseffekten. Till exempel, om du vill starta effekten 5 sekunder efter att musen svävat, ställ bara in övergångsfördröjning till 5s.
• transition: Det är förkortningsegenskapen för att sätta alla ovanstående övergångsegenskaper tillsammans.

Till exempel kommer följande kod att ändra bredden på div-elementet vid muspekaren. Se egenskapen övergångsstavning som tillämpas här.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animationer kontra övergångar

Likheter mellan animationer och övergångar

• Både övergång och animering används för att visualisera förändringar i egenskaperna hos ett element.
• Vi kan specificera varaktigheten för hur länge övergången och animeringen ska ske.
• Vi har vissa tidsfunktioner för att ändra hastigheten för att gå från ett värde till ett annat för övergångar såväl som animationer.

Skillnader mellan animationer och övergångar

• CSS-övergångar är reaktiva. De måste triggas av användarna. Animationer å andra sidan körs när sidan laddas i webbläsaren. De behöver inte utlösas.
• Övergångar går en gång och slutar sedan. Sedan måste vi trigga dem om och om igen medan animationer kan loopa. De kan starta på sitt eget stopp och sedan börja igen.
• Webbläsaren sköter övergångarna själv. Vi behöver bara specificera början och slutet av övergången. Vi kan ställa in övergångseffekten men vi kan inte ändra förändringshastigheten för en övergång däremellan. Till exempel, om en bild glider när musen svävar, kommer vi bara att se den tona in eller tona ut när vi håller muspekaren över den.
• Animationer, å andra sidan, ger flexibiliteten att ändra egenskaperna mellan start och slut. Detta sker med hjälp av nyckelbilder. Till exempel kan vi ställa in färgen på en bild till röd under de första 5 sekunderna, sedan som blå under de kommande 5 sekunderna, sedan som grön under de kommande 5 sekunderna och gul under de sista 5 sekunderna av animeringen. Därför har vi kontroll över animationer.

Leverantörsprefix

Alla CSS3-funktioner stöds inte av alla webbläsare. Därför använder vi prefix längs dessa CSS-egenskaper för specifika webbläsare som -webkit- (Safari), -moz- (Firefox) eller -o- (Opera). Detta gör att webbläsarmarkörerna kan lägga till stöd för den CSS3-funktionen. Dessa prefix är kända som leverantörsprefix eller CSS Browser-prefix. Därför måste vi också sätta leverantörsprefix tillsammans med animerings- och övergångsegenskaperna. Tänk till exempel på koden nedan och se hur leverantörsprefixen för Safari har använts:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Dricks! Du kan undvika detta krångel genom att använda bibliotek som -prefix-free. Det är ett JavaScript-bibliotek som lägger till nuvarande webbläsares prefix till valfri CSS-kod. Kolla in många sådana bibliotek som finns tillgängliga på webben.

Slutsats

Webbplatsutvecklare kan använda animationer och transformationer för att locka användare till dina webbplatser. Du kan använda dem för att förbättra formulär, meddelanden, bakgrundsgrafik, bilder, diagram, doodles, uppmaningsknappar och vad inte. Använd bara din fantasi så kan du hitta ett sätt att förvåna dina användare. Kom ihåg att även en liten förändring på din webbplats kan få den att se mycket bättre ut och öka dess värde. Så, har du använt animationer över din webbplats än? Dela dina tankar om att använda animationer och övergångar.