Piffa upp din webbplats med dessa animationstips och tricks.
Animationer och övergångar är en viktig del av webbdesign. Om du lägger till subtila animationer på din webbsida blir den mer engagerande. Enkla animationer som animerade ikoner, kinetisk typografi och animerade logotyper kan hjälpa till att förbättra användarupplevelsen. Lär dig fem fantastiska animationsknep som kan hjälpa dig att liva upp din webbplats.
1. Omvandla ett element vid svävning
En vanlig designpraxis är att ha ett element som skalas upp när man interagerar med det. Du kanske till exempel vill översätta knappar lite uppåt när någon svävar med musen på den. Du kan uppnå detta med hjälp av CSS omvandla fast egendom.
Förutsatt att du har en knapp:
<knapp>
Klicka här
knapp>
Du formaterade både dokumentets brödtext och knappen:
/* Justerar knappen mot mitten av sidan */
kropp {
visa: böja;
höjd: 100vh;
align-objekt: Centrum;
motivera-innehåll: Centrum;
bakgrundsfärg: svart;
}/* Styler knappen */
blå;
knapp {
stoppning: 1em 2em;
bakgrund:
gräns: 0;
Färg: vit;
gräns-radie: 0.25rem;
markören: pekare;
textstorlek: 2rem;
övergång: omvandla 500Fröken;
}
/* Hover states */
knapp:sväva,
knapp:fokus {
omvandla: översättY(0.75rem) 500Fröken;
}
Med det sista blocket ställer du in sväv- och fokuslägen på knappen. I båda tillstånden översätter du knappen längs Y-axeln med 0,75rem. Knappen skulle se ut så här:
När du håller musen på knappen svänger den i riktning uppåt. Övergången tar en halv sekund (500ms) att slutföra. Detta är ett mönster som du kan implementera inte bara på dina knappar, utan också på andra element (t.ex. bilder).
2. Deklarera flera nyckelrutor med en deklaration
Ett annat vanligt mönster i CSS-animationer är att iterera över samma värde flera gånger. Detta kan vara en specifik färg, storlek eller orientering. Du kan uppnå detta genom att använda CSS keyframe-animationer genom att deklarera flera nyckelbildrutor med en deklaration.
Tänk på knappen du skapade i föregående avsnitt. Kanske vill du iterera över flera bakgrundsfärger när du klickar på knappen. Men du vill också gå över samma färg i olika skeden av animeringen. Låt oss se hur man uppnår det i kod.
Först vill du animera knappen endast när du klickar på den. Så du skulle skapa en script.js fil, i vilken du kommer åt knappen och växlar en klass på knappen när den klickas:
konst knapp = dokumentera.querySelector("knapp")
button.addEventListener("klick", (e) => {
button.classList.toggle("party-time")
})
Vi använde querySelector för att komma åt knappen från webbsidan. För att lära dig mer om DOM-traversering, läs vårt inlägg på hur man korsar DOM med JavaScript.
De festtid klass aktiverar en animation med titeln fest:
.fest-tid {
animation: fest 2000Frökenoändlig;
}
För animeringen vill du börja med rött och övergå till gult vid 25%. Då skulle du återgå till rött på 50 % innan du går tillbaka till gult vid 75 %. Slutligen, vid 100 %, skulle du nöja dig med en mörkblå färg:
@nyckelrutor fest {
0%, 50% {
bakgrundsfärg: röd;
}
25%, 75% {
bakgrundsfärg: gul;
}
100% {
bakgrundsfärg: hsl(200, 72%, 35%);
}
}
Detta tillvägagångssätt är ganska användbart för att växla mellan färger på en färgbaserad bakgrund. Eftersom du kan upprepa flera nyckelbildrutor i en variabel, blir det superenkelt att använda samma egenskap i olika skeden av din animering.
3. Använda @property för att animera anpassade egenskaper
Som du kanske redan vet är inte alla egenskaper i CSS animerbara. Den officiella Mozilla dokumentation håller ett uppdaterat register över alla animerbara CSS-egenskaper. Om du funderar på att animera en icke-animerbar egendom, så skulle din bästa lösning vara att använda @fast egendom direktiv.
Börja med att ändra bakgrundsfärgen på din knapp till en linjär gradient:
knapp {
// ÖvrigCSS
bakgrund: linjär-gradient(90deg, blå, grön);
// ÖvrigCSS
}
Här är utgången:
Ofta vill du animera färggradienten på knappen. Även om det finns knep du kan använda för att flytta runt din gradient, kan du faktiskt inte animera den. Det här är för att bakgrund (såväl som bakgrundsbild) är inte en animerbar egendom. Det är här @fast egendom kommer in.
De @fast egendom direktiv låter dig registrera anpassade egenskaper. När du använder @fast egendom, måste du förse den med tre värden, nämligen syntax, ärver, och ursprungligt värde:
@fast egendom --Färg-1 {
syntax: "<Färg>";
ärver: Sann;
ursprungligt värde: röd;
}
@fast egendom --Färg-2 {
syntax: "<Färg>";
ärver: Sann;
ursprungligt värde: blå;
}
Den första är startegenskapen medan den andra är destinationsegenskapen. Nu, istället för att flytta över en bakgrundsbild (som du inte kan övergå), skulle du gå över från --färg-1 till --färg-2 (dina anpassade egenskaper) på en sekund:
knapp {
övergång: --färg-1 1000Fröken, --färg-2 1000Fröken;
}
Den här tekniken är användbar eftersom du också kan lägga till andra anpassningar. Till exempel lägger du till en fördröjning för att ge det en smidigare upplevelse. Möjligheterna är oändliga.
4. Använda negativa animeringsfördröjningar
Animationsförseningar är avgörande för att skapa smidiga animationer. Låt oss se ett exempel på det i praktiken. I den här delen, lägg till a div element med 15 punkter ovanpå knappen:
<divklass="prickar">
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
<divklass="punkt">div>
div>
Här är lite grundläggande styling för att förvandla varje barn div till en prick:
.prickar {
visa: böja;
glipa: .5rem;
marginal-botten: 20px;
}
.punkt {
bredd: 10px;
bildförhållande: 1;
bakgrundsfärg: röd;
gräns-radie: 50%;
}
Här använder vi Flexbox för att placera prickarna i en horisontell linje. För att dyka djupt in i Flexbox kan du kolla vår Handledning för CSS Flexbox.
Inuti script.js, lägg till koden som utlöser animeringen av prickarna. Du växlar dansa klass på prickarna:
button.addEventListener("klick", (e) => {
button.classList.toggle("party-time")
// Ny kod
dots.forEach((punkt) => {
dot.classList.toggle('dansa')
})
})
Dansklassen aktiverar en animation med titeln stiga:
.punkt.dansa {
animation: stiga 2000Frökenoändligalternativ;
}När det gäller animeringen, översätt helt enkelt prickarna -100px längs Y-axeln:
@nyckelrutor stiga {
100% {
omvandla: översättY(-100 pixlar)
}
}Nu är det dags att göra något intressant. Istället för att prickarna stiger samtidigt vill du animera prickarna så att de flyter som en våg. För att uppnå detta måste du lägga till animationsfördröjning till prickarna och öka varje prick med 100 ms:
.punkt:nth-child (1) {
animationsfördröjning: 100Fröken;
}
.punkt:nth-child (2) {
animationsfördröjning: 200Fröken;
}
.punkt:nth-child (3) {
animationsfördröjning: 300Fröken;
}
.punkt:nth-child (4) {
animationsfördröjning: 400Fröken;
}
/* Fortsätt göra tills du når den 15:e punkten */
Detta skapar en snygg animation där prickarna rör sig upp och ner i en vågig form. Följande bild fångar prickarna i mitten av animeringen:
Tänk på att detta kan vara problematiskt, vilket för oss till det femte tipset.
5. Använd prefers-reduced-motion för att aktivera inställningar
Tänk alltid på att många människor inte gillar rörelsebaserade animationer. Faktum är att de flesta användare har inställningar i webbläsaren som kan stänga av rörelsen. Rörelse kan distrahera sinnena och i svåra fall leda till illamående.
Lyckligtvis kan du enkelt ta hand om detta genom att slå in din animation i en ingen preferens mediafråga så här:
@media(prefers-reduced-motion: no-preference) {
.punkt.dansa {
animation: stiga 2000Frökenoändligalternativ;
}
}Om du nu skulle aktivera föredrar-reducerad-rörelse i din webbläsare, så körs inte animeringen.
Lär dig mer CSS-tips och tricks
CSS är full av fantastiska hacks som går utöver animationer och övergångar. Det finns till exempel tips och tricks för att göra hela din layout snygg och responsiv. Metoderna kan hjälpa dig att göra din webbplats mer engagerande, tillgänglig och trevlig att surfa på. Om du vill vara en av de bästa CSS-utvecklarna på en procent, hjälper det mycket att ha ett par trick i rockärmen.
