Så här använder du CSS3-övergångar och animationer för att markera användargränssnittet

Designers och artister har en lång historia av att experimentera med rörelser, effekter och olika slags illusioner med målet att lägga till ett extra lager i sitt arbete. Op Art Movement började använda optiska illusioner på 1960-talet för att ge intryck av rörelse.

Sedan dess har nyare och nyare tillvägagångssätt slagit upp, till exempel den nyligen populära kinetiska konsten som utökar betraktarens perspektiv genom att använda multidimensionell rörelse. Motion uppträdde också i datavetenskap med uppfinningen av den första blinkande markören 1967.

I front-end-utvecklingen brukar DOM-element normalt animeras av JavaScript innan CSS3 släpptes, och det är en metod som fortfarande fungerar, men Nya egenskaper som introduceras av CSS3 gör att vi kan förbättra våra mönster med olika effekter och rörelse på ett mer intuitivt sätt.

De två viktigaste teknikerna CSS3 erbjuder övergångar och animeringar. I det här inlägget tar vi en titt på vad de är, vad är skillnaden mellan dem och hur du kan utnyttja dem.

övergångar

Övergångar och animationer används båda visualisera förändringar i staten av ett HTML-element av ändra en eller flera av dess CSS egenskaper.

Den enklaste formen av statusändringsvisualisering ändrar knappens färg eller en länk när den svävar på. När det händer, får elementet en något annorlunda stil, vilket vanligtvis ses av betraktaren som om något har flyttat på skärmen.

Att ändra CSS-egenskaper hos en länk på svävar (eller fokusera eller klicka) är den äldsta och enklaste övergångsformen, och det fanns gott före CSS3-eran.

 en färg: orange;  a: svävar färg: röd;  a: fokus färg: blå;  a: besökte färg: grön; 

Övergångar används när ett HTML-element ändras från ett fördefinierat tillstånd till en annan. CSS3 introducerade nya egenskaper som möjliggör mer sofistikerade visualiseringar än tidigare, såsom tidsfunktioner eller varaktighetskontroll.

Vi kommer att ta en titt på de nya CSS-egenskaperna i nästa avsnitt, efter att ha förstått hur animationer skiljer sig åt. För nu, låt oss se de viktigaste sakerna du behöver veta om övergångar.

1. De har alltid en början och ett sluttillstånd.
2. Staterna mellan start- och slutpunkter definieras implicit av webbläsaren, vi kan inte ändra det med CSS.
3. De behöver explicit utlösning, till exempel att lägga till en ny pseudoklass av CSS eller en ny klass av jQuery.

Du kan se ett vackert exempel på smart utnyttjade CSS3-övergångar nedan, där författaren avslöjar dold information på ett sätt som inte är påträngande men ändå styr användarnas fokus på det nya innehållet.

animationer

Om vi ​​vill visualisera tillståndsändringar med mer komplicerade rörelser, eller om vi inte har en explicit utlösare, t.ex. Om vi ​​vill börja effekten när sidan laddas, animeringar är vägen att gå.

Animationer gör det möjligt att definiera en mer komplex sökväg genom att ställa in och konfigurera vår egen nyckelrutor. keyframes är mellanliggande punkter under animationen, som gör att vi kan ändra stilen på det animerade elementet så många gånger som vi vill.

Även om CSS3 erbjuder bra sätt att bygga sofistikerade animationer, är det vanligtvis svårare att skapa dem än övergångar, det är därför det finns många bra animeringsbibliotek där ute som kan underlätta vårt arbete.

De viktigaste sakerna du behöver veta om CSS3-animationer är:

1. de behöver inte explicit utlösning, de kan börja på sidan laddas eller när en annan DOM-händelse äger rum i webbläsaren
2. de kan användas i fall då övergångar används, till exempel när en ny klass eller pseudoklass läggs till eller tas bort (även om det är ett mindre frekvent användningsfall)
3. de kräver att vi definierar några nyckelbilder (mellanliggande stater)
4. vi kan ange antal, frekvens och stil för dessa nyckelbilder

I exemplet nedan kan du se en cool animerad rullgardinsmeny. Animationen startar när vi klickar på knappen. Detta uppnås genom att lägga till extra klasser i listelementen med jQuery när klickhändelsen inträffar.

Dessa nya klasser är animerade med angivna @keyframes regler i CSS-filen. De extra klasserna tas bort av jQuery när användaren klickar på knappen nästa gång och menyn döljs igen.

CSS Egenskaper och The @keyframes At-regeln

För övergångar kan vi antingen använda övergång shorthand-egenskapen eller 4 enskilda övergångsrelaterade egenskaper: övergång-fastighet, Övergångsperiod, övergång-timing-funktion, och övergång-fördröjning. Shorthandegenskapen innehåller alla enskilda egenskaper i förkortad form.

För animeringar finns det animering shorthand egenskapen till våra händer som står för ingen mindre än 8 enstaka animationsegenskaper, nämligen animering-namn, animering-varaktighet, animering-timing-funktion, animering-fördröjning, animering-iteration-count, animering-riktningen, animation-fill-mode, och animation-play-state.

Det viktigaste med både övergångar och animeringar är det vi alltid måste ange CSS-egenskaperna som kommer att ändras under tillståndsändringen. Med övergångar ser det ut så här:

 .element bakgrund: orange; övergångsegenskap: bakgrund; övergångsperiod: 3s; övergångstidsfunktion: inlämning  .element: sväva bakgrund: röd; 

Vi angav bakgrund egendom, för det här är vad som kommer att ändras under övergången.

Vi kan ändra mer än en CSS-egenskap i en övergång, i så fall skulle koden ovan ändras på följande sätt: övergångsegenskap: bakgrund, gräns;. Vi kan också använda Övergångsegenskap: alla;, om vi inte vill specificera varje egendom separat.

Vi kan välja stenografi övergång egendom också. Om vi ​​gör det måste vi alltid vara uppmärksamma på den korrekta ordningen för de inre egenskaperna (se syntaxen i dokumenten).

 .element bakgrund: orange; övergång: bakgrund 3s lätt in;  .element: sväva bakgrund: röd; 

Om vi ​​vill skapa en animering, måste vi ange de relaterade nyckelrutor. CSS-egenskaperna måste ändras separat definierade @keyframes at-regler. Här är ett exempel på hur vi kan göra detta:

 .element position: relativ; animationsnamn: slide; animeringstid: 3s; animering-timing-funktion: inlämning  @keyframes slide 0% left: 0;  50% vänster: 200px;  100% vänster: 400px; 

I exemplet ovan skapade vi en mycket enkel glidande effekt. Vi definierade animering-namn, sedan bundna 3 nyckelramar till det som vi angav i @keyframes slide ... at-regler. Procentandelarna avser animationens varaktighet, så 50% händer vid 1,5s i exemplet.

Vi kunde använda stenografi animering egendom eller kunde definiera nyckelramarna med det enklare från till reglera på följande sätt:

 .element position: relativ; animering: skjut 3s enkelt in;  @keyframes slide from left: 0;  till vänster: 400px; 

Skapandet av mer komplexa animationer är sin egen konstform. Om du är intresserad kan du läsa två av våra animationstutorials om hur du skapar en avancerad markering och hur du skapar en studseffekt.

När du bygger övergångar och animeringar behöver du veta det inte alla CSS-egenskaper kan animeras, så det är alltid en bra idé att kolla egenskapen du vill ändra i CSS Animatable.

CSS3-animationer och övergångar fungerade länge med leverantörs prefix, vilket vi inte behöver använda längre, men Mozilla Developer Network rekommenderar fortfarande att lägga till -webkit prefix för ett tag, eftersom stödet till webbkitbaserade webbläsare först nyligen uppnådde stabilitet.