Så här använder du CSS3-övergångar

Alla älskar rörelse. Att lägga den fjärde dimensionen (tid) till en webbdesign är den huvudsakliga vägen för skärmbaserad design som sticker ut från utskriftsdesign. CSS-övergångar är en enkel metod för att animera egenskaper hos ett element som gör att du kan berika vissa händelser i din webbdesign utan att behöva Flash eller JavaScript.

W3C beskriver lämpligt övergångar på deras hemsida som "CSS-övergångar gör att egenskapsändringar i CSS-värden kan ske smidigt under en viss tid". Med andra ord tillåter CSS-övergångar oss att ändra en egenskap stegvis, skapa en känsla av rörelse och imbubera mönster med subtilitet och känslor som inte är möjliga med en snabb förändring.

Webbläsarstöd

Alla moderna webbläsare (ja även IE!) Stödjer nu CSS-övergångar. Men viktigast, om övergångar inte stöds i webbläsaren som används ignoreras övergången och egenskapsändringarna kommer att tillämpas direkt. Denna graciösa nedbrytning är en hörnsten av bästa praxis.

För att utöka utbudet av webbläsarstöd kan vi använda leverantörs prefix, det här utvidgar funktionen till att omfatta Firefox 4-15, Opera 10.5-12 och de flesta versionerna av Chrome och Safari. Koden, inklusive alternativen för leverantörs prefix, ser ut så här:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

Den icke-prefixade egenskapen läggs längst ner i stapeln för att säkerställa att slutlig implementering kommer att trumma alla andra, eftersom egenskapen flyttar från utkast till färdig status.

Övergångsparametrar

Det finns fyra parametrar för CSS-övergångar:

• övergångsegenskap: egenskapen som ska tweened, eller sökordet "alla" ska tillämpas på alla fastigheter;
• Övergångsperiod: Övergångens varaktighet
• Övergångs-timing-funktion: lättnad som ska appliceras, detta skapar en mer naturlig utseende rörelse
• transtionsfördröjning: specificerar en fördröjning till början av övergången.

Dessutom kan du också använda shorthandegenskapen (som i exemplet ovan) där parametrarna anges som egenskap, varaktighet, tidsfunktion, fördröjning.

Egenskaper som kan överföras

Du kan bara övergå egenskaper som kan översättas till ett matematiskt värde. Så till exempel kan du övergå fontstorlek; Du kan inte ändra typsnittet.

Den fullständiga listan över egenskaper som för närvarande kan överföras är följande:

bakgrundsställning, gränsbottenfärg, gränsbunden bredd, gränsen till vänsterfärg, gränsen till vänster bredd, gränsen till höger-färg, gränsen till höger bredd, kantavstånd, kantfärg, gränssnittets bredd, botten, klipp, färg, teckensnittstorlek, teckensnittvikt, höjd, vänster, bokstavsavstånd, marginalbotten, marginal-vänster, marginal-höger, marginal-topp, maxhöjd, max- bredd, minhöjd, min bredd, opacitet, konturfärg, kontur-bredd, vaddering-botten, vaddering-vänster, vaddering-höger, vadderingstopp, höger, textinmatning, textskugga, anpassa, bredd, ordavstånd, z-index.

Använda övergångar

Övergångsdeklarationer bifogas elementets normala tillstånd. Därför deklareras endast en gång för flera stater, såsom: fokus,: aktiv och pseudoklasser.

Med hjälp av följande kod kan vi ställa in en grundmeny och ett stycke text. Den är stylad så att menyalternativen ändrar sin färg och bakgrundsfärg när den rullas över, och så att inline-länken ändrar sin underfärg från vit till grön när den svängs över:

Business
  Koda 
  Design 
  Inspiration 
  Diverse 
  Mobil 
  Nyheter 
  Medel 
  användbarhet 
  Integer ställer in en ante inline länk   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Integer ställer upp en tidigare väntningsfras.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Så här ser det ut:

Använder du CSS3-övergångar? Vilka effekter har du kunnat skapa? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, rörelsebild via Shutterstock.