CSS Övergångar 101

Trots människors förväntningar på förändring och rörelse på skärmen har CSS och HTML några kontroller som gör att du kan designa interaktivitet, och de som finns är binära.

En länk är antingen en färg eller en annan. Ett textfält är antingen en storlek eller en annan. Ett foto är antingen transparent eller ogenomskinligt. Inga in-betweens från ett tillstånd till ett annat. Inga övergångar .

Detta har lett till att de flesta webbsidor känner sig plötsliga, med element som ändras och förändras ungracefully.

Ja, vi kan använda DHTML och utnyttja jQuery-biblioteket för övergångar, men det kräver mycket kod för något som borde vara väldigt enkelt.

Vad vi behöver är ett snabbt och enkelt sätt att lägga till enkla övergångar till sidan och i den här artikeln hittar du användbar information om CSS-övergångar och hur du använder dem.

Några månader tillbaka, jag fastnade min fot i min mun av vilket tyder på att designers bör börja använda de nya CSS 3-teknikerna som tillåter dem att göra några av de grundläggande styling som de har begärt. Det enda problemet: Ingen av dem arbetade i Internet Explorer. Nej, inte ens IE8.

Vissa läsare kände att det var tekniker som omkring 75% av publiken inte skulle kunna se var oskäliga.

Till de läsare säger jag "Håll på dina hattar" , för att jag ska introducera dig till en annan ny CSS-egenskap som låter dig lägga över övergångar till något element med bara ett par rader kod.

CSS-övergångar introduceras just nu på CSS Level 3 men har redan lagts till som en förlängning till Webkit. Just nu innebär det att de bara fungerar i webbläsare baserade på Webkit, inklusive Apple Safari och Google Chrome.

Där CSS-övergångar kommer ifrån

Övergångar har varit en del av Webkit ett tag och ligger till grund för många coola saker som Safari-gränssnittet kan göra som andra webbläsare inte kan.

Men W3C CSS Workgroup motstod att lägga övergångar till sina officiella specifikationer, vissa medlemmar hävdar att övergångar inte är stilegenskaper och skulle hanteras bättre av ett skriptspråk.

Men många designers och utvecklare, inklusive mig själv, hävdade att de faktiskt är stilar - bara dynamiska stilar, snarare än de traditionella statiska stilar som så många av oss är vana vid.

Lyckligtvis höll argumentet för dynamiska stilar dagen. I mars började representanter från Apple och Mozilla lägga till CSS Transitions Module till CSS Level 3 specifikationen , nära modellerad om vad Apple redan hade lagt till Webkit.

En kort notering om designförbättringar

Innan vi fortsätter, låt mig betona en punkt: Lita aldrig på stilar för webbplatsfunktionalitet om stilar inte är webbläsars interoperabla (dvs. tillgängligt på alla vanliga webbläsare).

En gång till för dem som saknade det: Lita aldrig på stilar för webbplatsfunktionalitet om stilerna inte är webbläsars interoperabla .

Med det sagt kan du använda stilar, som övergångar, som designförbättringar för att förbättra användarupplevelsen, utan att göra det lättare för dem som inte kan se dem. Det här är okej så länge du annars skulle kunna leva utan övergångarna och användarna kan fortfarande slutföra sina uppgifter.

Först, några övergångsidéer

CSS-övergångar ersätter inte alla användningar av DHTML, men här är några sätt att förbättra din design i webbläsare som stöder övergångar, utan att förstöra det för resten av publiken.

Du måste se den här sidan i Apple Safari 3+ eller Google Chrome för att se dessa övergångar fungerar. Båda webbläsarna finns tillgängliga i Mac och PC-smaker.

Roll-Overs

Den mest uppenbara användningen för övergångar är att markera element (om länkar, tabeller, formulärfält, knappar eller något annat) när användarens mus himmlar över dem. Övergångar är ett bra sätt att ge sidan ett jämnare utseende.

Exempel # 1

Nedrullningsmenyer

Rena CSS-menyer är lätta att åstadkomma, och övergångar låter dig ge menyer ned och markera effekter.

Exempel # 2

Animation

Du kan flytta ett objekt mellan två punkter på sidan och använda övergångar för att animera dess rörelse.

Exempel # 3

Klicka & håll!

Övergångar, stater och åtgärder

Men håll på en minut där, Tex. Innan vi dyker upp i övergångar måste vi förstå de olika stater som ett element kan övergå till.

Stater definierar hur ett visst element interagerar med användaren eller sidan, och de anges i CSS med hjälp av pseudoklasserna. Till exempel, när användaren svänger över ett element, skulle det elementet utformas med hover pseudo-klassen.

Övergångar fungerar genom att ändra en stil över en tidsperiod mellan olika elementtillstånd. Till exempel kommer färgvärdet för standardtillståndet för ett element att passera genom mellanliggande färger i spektret innan det visas som färgvärdet för svängtillståndet.

En enkel övergång

Låt oss överväga en enkel övergång från en färg till en annan när användaren hänger över en länk. Precis som någon annan CSS-egenskap läggs övergångar direkt till den väljare som den ska tillämpas på. Egenskapen kan då ta ett av följande fyra värden.

CSS-egenskapen
Egenskapen som ska ändras (till exempel färg). Se tabellen nedan för en lista över alla CSS-egenskaper som kan överföras.

Varaktighet
Hur länge övergången kommer att vara, i allmänhet i sekunder (till exempel, .25s ).

Timing funktion
Låt dig styra hur varaktigheten är tidsbestämd. Snarare än att använda ett enkelt linjärt tal kan du påskynda eller sakta ner övergången eller ens specificera ett beat eller count (till exempel, linear ). Mer om detta senare i artikeln.

Dröjsmål
Hur länge att vänta mellan åtgärden och början av övergången, vanligtvis uttryckt i sekunder (till exempel, .1s ). Detta värde kan utelämnas om du inte vill ha en fördröjning.

Eftersom övergångsegenskapen startade som en Webkit-förlängning måste vi inkludera både transition och -webkit-transition egenskaper för bakåtkompatibilitet.

Låt oss först lägga båda dessa egenskaper till :hover pseudo-klass:

[Css]
a: svävar {
färgen röd;
-webkit-övergång: färg .25s linjär;
övergång: färg .25s linjär;
}
[/ Css]

Nu, när en länk svängs över, istället för att hoppa från blått till rött, kommer det att övergå för en kvart sekund genom mellanfärgen.

Självklart vill vi också övergå till standardlänkfärgen, så vi lägger till en övergång till :link (och förmodligen :visited ) pseudoklasser, med bara en mycket kort fördröjning (en tiondel av en sekund) innan den svinner:

[Css]
a: länk, en: besökte {
färgen blå;
-webkit-övergång: färg .25s linjär .1s;
övergång: färg .25s linjär .1s;
}
[/ Css]

Lägga till flera övergångar

Eftersom en övergång är en CSS-egenskap, om du lägger till flera instanser av övergångsegenskapen i samma regel, kommer den sista att åsidosätta tidigare, istället för att lägga till dem. Så i följande regel skulle den enda övergången vara bakgrundsfärgen:

[Css]
a: svävar {
färgen röd;
bakgrundsfärg: rgb (235,235,185);
-webkit-övergång: färg .25s linjär;
övergång: färg .25s linjär;
övergång: bakgrundsfärg .15s linjär .1;
}
[/ Css]

Flera övergångar läggs till som en kommaseparerad lista i samma övergångsegenskapsdefinition:

[Css]
a: svävar {
färgen röd;
bakgrundsfärg: rgb (235,235,185);
-webkit-övergång: färg .25s linjär, bakgrundsfärg .15s linjär .1s;
övergång: färg .25s linjär, bakgrundsfärg .15s linjär .1s;
}
[/ Css]

Detta skapar både en färg och bakgrundsfärgövergång.

Vad kan överföras?

Nästan alla CSS-egenskaper som har en färg-, längd- eller positionskomponent, inklusive många av de nya CSS 3-egenskaperna, kan ges en övergång. Ett anmärkningsvärt undantag verkar vara boxskugga.

Strax från W3C: s Transitions-spec, här är en lista över CSS-egenskaper som kan ges en övergång, tillsammans med de aspekter som omvandlas. Jag har markerat några av de mer användbara egenskaperna.

Övergångstid och fördröjning

Med övergångar kan du variera räntesatsen, räkna långsammare i början och påskynda i slutet, vice versa eller något däremellan. CSS-övergångar kommer med fem nyckelord för övergångstid och låter dig ange värden för din egen tidkurva.

En universell övergång?

Övergångar kommer snabbt att bli standard operativ procedur för alla webbplatser, vilket förbättrar användargränssnittets återkoppling.

För att lägga till övergripande övergångar över hela din webbplats är ett alternativ att lägga till en övergång till universalväljaren, som liknar en CSS-återställning. Detta gäller en standardövergång till alla element på sidan, så att du kan hålla en konsekvent övergång:

[Css]
*: länk, *: besökte, *: svävar, *: aktiv, *: fokus {
-webkit-övergången:
färg .25s linjär,
bakgrundsfärg .25s linjär,
border-color .25s linjär;
övergång:
färg .25s linjär,
bakgrundsfärg .25s linjär,
border-color .25s linjär;
}
[/ Css]

Ett argument mot en universell övergång, och faktiskt mot att använda den universella väljaren för CSS återställs i allmänhet, är att tillämpning av en stil på varje element på sidan kan sakta ner sidåtergivning. Men jag har aldrig hittat några bevis på att detta är fallet. Någon som vet annorlunda?

Jason Cranford Teague är författare till mer än 13 böcker om digitala medier, inklusive Tala i stilar: Grunden för CSS för webbdesigners . För mer information om CSS och webtypografi, kolla in Jasons nya bok, Fluid Web Typography . Följ Jason på Twitter: @jasonspeaking .

• ← Hur man planerar för frånvaro av JavaScript
• 40 Utmärkt webbsidor för utställningsuttryck →