Share
CSS har mognat på många sätt under åren, inte minst när det gäller CSS-animationer. Med varje dag som passerar fler och fler utvecklare skapar levande, andningsgränssnitt. I den här artikeln ska vi titta på tillståndet för CSS-animationer, hur det har vuxit, vad det är möjligt för idag och täcka några resurser och verktyg tillgängliga. Låt oss flytta!
Användning av animering på nätet ökar, till stor del på grund av övergång och @keyframes tillägg till CSS. Det var en gång när animationer och CSS inte kände varandra, men det är inte fallet idag. Artiklar, handledning, premium kurser och jämn rörelse riktlinjer är mycket mer tillgängliga nu än de en gång var. Kombinerande @keyframes med animering egendom, tillsammans med övergång har äntligen gett utvecklare chansen att föra rörelse på rätt sätt och låta gränssnitta en personlighet och ett liv en gång obesegrad.
Från Googles riktlinjer för materialrörelseDet har aldrig varit en mer spännande tid för CSS-animationer och interaktionsdesign än just nu!
Nuvarande genomförande av animering egendom tillåter utvecklare att kontrollera varaktighet, timing, fördröjning, iterationsräkning, riktning, fyllningsläge och uppspelningstillstånd. Timingdelen möjliggör också a steg() fungera. Denna speciella tidsfunktion bryter en animering eller övergång till segment (som en filmremsa), snarare än som en kontinuerlig övergång från ett tillstånd till en annan. Keyframes tillåter rörelseutvecklare att deklarera positioner med från, till och till och med procentandelar att animera mellan de angivna fastighetsvärdena. Det är en bra start, men vi diskuterar i ett ögonblick där det blir kort.
Då är det härliga övergång fast egendom; en egendom lika fancy som animering och en som tillåter oss att styra animationshastigheten vid byte av egenskaper. Processen för övergång mellan två tillstånd kallas vanligtvis en implicit övergång; en term som beskriver staterna mellan start- och slutstaterna, implicit definierade av webbläsaren. Övergångar tillåter för närvarande anpassning av egendomen, timing, varaktighet och fördröjning.
Introvideoen ovan är hämtad från Upp och Running With CSS Transitions av Craig Campbell.
CSS-animering kan vara kraftfull när den sitter, men det saknar fortfarande en viss aspekt som animatörer önskar mest. tidslinje-esque kontroll. Vad jag menar med detta är sekvenser som kan påverkas och manipuleras baserat på timing.
@keyframes move-object från startpositionsegenskap och värden vid 2s gör detta vänta tills 4s detta händer till stopp positionsegenskap och värden
Syntaxen ovan existerar inte, men målar en bild i mer detalj av vilka animationsexperter på webben begär. GreenSock till exempel är välkänd för denna typ av sekvensering, men tyvärr bara händer i JavaScript. Skulle det inte vara bra att ha detta i CSS också? jag tror det.
Video ovan taget från GreenSock Animationsplattform: Första steget av Craig Campbell.
Det är säkert förmågan att kontrollera animering och övergång händelser genom att använda JavaScript för ytterligare granulär kontroll av en sekvens. Med JavaScript kan utvecklare upptäcka starten på varje ny animationsreaktion, när en animering inträffar, när animationen slutar och detsamma gäller för övergångshändelser.
Det här är ganska spännande tider för verktyget för webbutvecklare för att inspektera och anpassa CSS-animationer. De flesta webbläsare (Firefox, Chrome) tillåter inspelning av CSS-animationer med avseende på Safari och Edge. Från vad jag har fått höra av en källa som arbetar för Microsoft är animationsinspektion något som Microsoft-teamet verkligen vill göra. Låt oss hoppas att detta är detsamma för Safari.
När det gäller webbläsare som do support animation inspektion vi har följande förmågor ...
Accentsconagua
::innan och ::efter pseudo-element.nyckelrutor egendom och värden i flygningen.nyckelrutor namn.Medan utvecklare har en hel del att välja på baserat på listan ovan, behöver de fortfarande mer verktyg på animeringar om användarinteraktion. Detta kan också kallas egendomsinterpolering, införandet av ett mellanvärde i en serie genom att beräkna det från omgivande kända värden; ungefär som när du byter till ett nytt värde med övergångar. Dessa dynamiska / reaktiva animeringar kan startas när som helst, är obestämda och har varierande varaktighet baserat på användarinteraktion. Något en gång som inte kan debuggeras eller inspekteras från någon utvecklingsverktyg som tillhandahålls av en webbläsare just nu.
Framtiden ser ljus ut för CSS-animering, men med allt spec relaterat tenderar det att gå långsamt. CSS rörelse-bana modul, innehålla, kommer att ändras och den föredrar reducerade-motion mediafråga (ännu inte en standard och endast WebKit) är de nuvarande kommande funktionerna för CSS-animatörer.
Rörelsesvägar tillåter utvecklare att animera något grafiskt objekt längs en författad angiven sökväg. Du kan definiera en väg på ett mycket liknande sätt som definieras av SVG 1.1.
.my-element motion-path: path ('M93,9,46,4c9,3,9,5,13,8,17,9,23,5,17,9s17,5-7,8,17,5-17,5s-7,8-17,6-17,5-17,5c-9,7 , 0,1-13,3,7,2-22,1,17,1 c-8,9,8,8-15,7,17,9-25,4,17,9s-17,5-7,8-17,5-17,5s7,8-17,5,17,5-17,5S86,2,38,6,93,9,46,4 z '); förskjutning: 0; rörelse-rotation: omvänd; De rörelse-bana definierar en väg som ett element följer eller flyttar på. Vår rörelse-offset egendom är placeringen av elementet någonstans på banan. Egendomen rörelse-rotation är den riktning elementet "vetter mot" när det rör sig längs banan.
Kolla in dessa samlingar av demo på CodePen från Dan Wilson som ger liveexempel på framträdande rörelse-bana Förmågor.
De kommer att ändras egendom ger ett sätt för författare att ange i webbläsare om vilken typ av förändringar som förväntas för ett element. Detta låter webbläsaren ställa in lämpliga optimeringar före tidpunkten innan elementet faktiskt ändras.
.my-element will-change: transform;
Denna typ av optimering kan förbättra uppfattad laddningstid och layout på en sida genom att fylla dyrt arbete före tidpunkten innan de faktiskt krävs. Säger att det föreslås att utvecklare inte tillämpar kommer att ändras till alltför många element eftersom det kan konsumera resurser och få en sida att sakta ner.
Denna icke-spec-tillägg till WebKit skapar stilar som undviker stora rörelser för användare som anger en preferens för reducerad rörelse i Systeminställningar.
@media (föredrar-reducerad rörelse) .my-element animation: none;
Det här är mer en tillgänglighetssituation jämfört med faktisk rörelseutveckling. En intressant att tänka på och till en att kolla på din fritid.
Denna CSS-modul indikerar att elementets subtree är oberoende av resten av sidan, vilket möjliggör stora optimeringar av användaragenter när de används korrekt. Den mest intressanta för CSS-animatörer är måla värde som kan överföras.
.element-med-rörelse innehåller: färg;
Om det innehållande elementet är avskärmat eller dolt kan webbläsaren direkt hoppa över att måla innehållet eftersom de är garanterade att de inte är skärmda eller dolda. Detta ger slutligen värde genom att säkerställa en snabbare reningsrörledning under en första färg. Detta är för närvarande fortfarande ett fungerande utkast på W3C.
Det finns många sätt att följa med CSS-animationer. Nedan finns några verktyg och resurser, inklusive specifikationer för att läsa över på din fritid. Om du känner till andra fantastiska och hjälpsamma resurser, var snäll och låt oss veta i kommentarerna och vi lägger till dem i listan. Glad animering!
