Från att CSS tidigare bara kunde användas för att formge webbsidan, finns det idag även stöd för att skapa både rörelser och övergångar utan att behöva kunna programmera JavaScript, vilket tidigare var den enda möjligheten. Det finns därtill många fördelar att använda CSS-baserade animationer och övergångar, även om du kan skriva JavaScript. Den främsta är att de CSS-baserade animationerna blir väldigt optimerade, vilket gör att de flyter på bättre även på långsammare datorer, plattor och telefoner.
Övergångar, eller transition som egenskapen vi använder heter, är en lite enklare form av animation. Den gör så att övergången mellan ett tillstånd till ett annat blir utspridd över en given tid. Det kan exempelvis vara en knapp som byter färg när användaren för muspekaren över den. Vi gör själva förändringen med pseudoklassen :hover, men när vi också lägger till en övergång så får vi färgen att gradvis förändras i en enkel animation. Här finns ett exempel med bättre förklaringar.
En transition består av fyra olika egenskaper:
transition-property: som bestämmer vilken egenskap som ska animeras med en övergång.transition-duration: som bestämmer hur lång tid övergången ska ta. antingen i sekunder (s) eller millisekunder (ms).transition-timing-function: som bestämmer hur övergången ska ske. Grundformateringen här är linear, men ofta använder man någon annan typ som t.ex. ease, ease-in, ease-out eller ease-in-out. Se ett exempel på hur det fungerar här.transition-delay: som sätter en liten fördröjning innan animationen börjar. Den sätts i sekunder (s) eller millisekunder (ms). Kortformen av ovanstående 4 egenskaper heter bara transition: ochdär kan man sätta alla av ovannämnda egenskaper på samma rad i följande ordning:
transition: transition-property transition-duration transition-timing-function transition-delay;
Detta kan då se ut ungefär såhär:
transition: background 850ms ease-in 100ms;
Av dessa är det framför allt de tre första som vi använder regelbundet. Normalt sett används inte fördröjningen, men det kan finnas tillfällen då man vill att en del av en övergång startar lite senare för att få till önskad effekt. Men normalt sett vill att övergången ska initieras direkt. Egenskapen kan då helt utelämnas och har grundvärdet 0s.
Om vi vill att alla <button>:s ska byta bakgrundsfärge och det ska animeras under 0,3 sekunder, med en mjuk övergång när man för muspekaren över dem, så lägger vi till följande i CSS-regeln för button:
button {
background-color: goldenrod;
transition: background-color 0.3s ease;
}
Denna kodrad ska skrivas i css-koden för elementet som ska animeras, så Därefter är det bara att lägga till en regel för pseudoklassen :hover, där vi ger elementet en ny bakgrundsfärg. Webbläsaren sköter sedan resten med att räkna ut hur övergången mellan de två bakgrundsfärgerna ska se ut:
button:hover {
background-color: tomato;
}
Det går också fint att göra övergångar för flera egenskaper samtidigt. Om vi exempelvis nu vill lägga till att knappen även blir lite större med egenskapen transform och funktionen scale() skriver vi följande rad i regeln för button:hover:
button {
transform: scale(1.05);
}
Det vi nu kan se är att knappen skalas upp med 5% när vi för muspekaren över den, men detta sker helt abrupt. Vi måste nu lägga till att även denna egenskap ska animeras i övergången. Detta gör vi genom att skriva ett kommatecken efter det aktuella värdet för transition och skriver in transform 0.3 ease:
button {
transition: background-color 0.3s ease, transform 0.3s ease;
}
Nu har vi definierat att både bakgrundsfärgen och transform-egenskapen ska animeras. Om vi har många egenskaper som vi vill ska vara med i övergången kan vi också göra det väldigt enkelt för oss och använda nyckelordet all istället för en specifik egenskap. Då skriver vi istället:
button {
transition: all 0.3s ease;
}
Detta medför att alla egenskaper vi förändrar i :hover-regeln kommer att animeras, oavsett vi vill det eller ej. Här får man vara lite försiktig då det lätt kan bli oönskade effekter. För säkerhets skull kan det därför vara bra att ta sig tiden att skriva ut namnen på de specifika egenskaperna som ska animeras i transition.
Om vi vill skapa mer komplexa animationer, som inte bara är en övergång mellan två olika tillstånd, kan vi använda animationsfunktionerna i CSS. Förfarandet blir lite mer komplext än med transition, eftersom vi här måste definiera vilka steg vi vill att animationen ska genomgå via det som kallas keyframes eller nyckelbilder på svenska.
Vi definierar våra keyframes i ett speciellt, separat kodblock som inleds med nyckelordet @keyframes, följt av namnet på den animation vi skapar. Inuti blocket skriver vi vilka värden vi vill att olika CSS-egenskaper ska ha vid specifika tidpunkter under vår animation. För en enkel animation som endast går från punkt A till punkt B kan vi använda nyckelorden from och to. Vi skapar nedan en animation med namnet simple-move, där vi animerar egenskapen top från 0px till 100px.
För att få ett element på sidan att använda denna animation använder vi den speciella egenskapen animation, vilken precis som transition kan ta en hel harang med olika inställningar. För våra ändamål ska vi begränsa oss till en handfull grundläggande inställningar. För en väldigt enkel animation som bara ska köras en gång räcker det med två värden: hur lång tid animationen ska ta och namnet på animationen; den samling keyframes vi ska använda oss av. Vi lägger in följande kodrad i slutet av den befintliga CSS-regeln för #ball:
animation: 3s simple-move;...(boll1)
När webbsidan laddas in kommer animationen att köras en gång, varpå elementet sedan kommer att abrupt flyttas tillbaka till ursprungsläget. Om vi istället vill att animationen ska köras i en oändlig loop kan vi skriva in nyckelordet infinite mellan tidsvärdet och animationsnamnet:
animation: 3s infinite simple-move;...(boll2)
Nu kommer animationen att upprepas i all evighet. Det enda som är lite trist är att den lilla röda cirkeln hoppar tillbaka till startpositionen efter varje rörelse. För att få animationen att spelas upp baklänges varannan gång, så att cirkeln rör sig mjukt tillbaka igen, kan vi efter infinite lägga till nyckelordet alternate:
animation: 3s infinite alternate simple-move;...(boll3)
Ett annat alternativ är att vi lägger till fler keyframes i vår animation, där vårt animerade element kommer tillbaka till ursprungsläget i slutet. För att lägga in keyframes på specifika tidspunkter mellan from: och to: använder vi oss av procentsatser (i vanlig ordning). För att göra animationen lite roligare denna gång ska vi låta cirkeln röra sig runt i en kvadratformad rörelse:
Nu ser dock animationen lite konstig ut. Dels sker animationerna i grundläget med en mjuk övergång, där animationen accelererar och bromsar in för att göra rörelsen mer naturlig. Detta kallas för easing på animationsspråk. I vårt fall vill vi dock att animationen ska ske med samma hastighet hela tiden, vilket kallas en linjär animation. Vi ska därför lägga till nyckelordet linear direkt efter tidsangivelsen för längden på animationen. Vi passar också på att ta bort alternate, så att cirkeln fortsätter åt samma håll hela tiden:
animation: 3s linear infinite simple-move;...(boll4)
Nu rör sig cirkeln som en fiende i ett gammalt tv-spel från 80-talet. Perfekt! 😊
Att animera en rörelse är förstås bara en av många användningsområden för animation. De allra flesta egenskaper kan animeras på detta sätt, så det är bara fantasin som sätter gränserna.
Något vi alltid måste tänka på när vi använder snitsiga övergångar och animationer på våra webbsidor är att det kanske inte uppskattas av alla. Om det rör sig och blinkar alltför mycket kan det bli problematiskt både för personer med neuropsykiatriska diagnoser som ADHD och för epileptiker. För just detta ändamål finns det en speciell media-query vid namn prefers-reduced-motion som fångar upp om användaren har ställt in i webbläsaren att denne önskar att minska mängden rörelse på webben. För mer information om detta, se: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion