Även om ändringarna som implementeras av CSS3 fortfarande inte stöds på alla webbläsare och webbläsarfunktionalitet över de som stöder det kan det vara en verklig smärta, det är fortfarande ganska roligt att experimentera och se vad som är möjligt.
I den här korta handledningen kommer vi att bli galen med CSS3-övergångar i Webkit för att skapa en enkel webbsida som visar några riktigt fina effekter.
Slutlig effekt
Bara så att du kan få en känsla för var vi är på väg, här är en demonstration av den slutliga effekten.
Som du kan se använder vi Webkit CSS3-övergångar för att ändra bakgrundsfärg, textfärg, länkfärg och sveplänkfärg för att lägga till lite liv på en annars enkel webbsida. När du flyttar musen i rektangeln ändras bakgrunden, textfärgen och länkfärgen. Då svävar över en länk utlöses en annan färgövergång för länktexten.
Vi måste hålla oss till Webkit på den här som Firefox övergångar är fortfarande kommande (leta efter -moz-övergång i Firefox 3.7).
CSS3-övergångar
Innan vi börjar, låt oss ta en titt på den grundläggande syntaxen för CSS3-övergångarna vi ska använda. I grund och botten övergår Webkit arbete genom att ange tre objekt: egenskapen som ska överföras, övergångens varaktighet och tidsfunktionen. Här är ett exempel.
I exemplet ovan har vi valt att övergå färgen linjärt över en period av en sekund. Timing-funktionen styr hastigheten på ändringen under övergångens varaktighet. Att välja linjär håller förändringshastigheten stadigt medan du väljer inlämning kommer att påskynda övergången något när den fortskrider. För en detaljerad förklaring av alternativen för tidsfunktion, kolla in Webkit.orgs artikel om CSS Animation.
Exemplet ovan har bara valt en enda egenskap för övergång, men vi kan också välja att överföra flera egenskaper i ett enda kommando. Tänk på följande:
I det här exemplet väljs både textfärgen och bakgrundsfärgen (åtskilda av kommatecken) för en övergång på en sekund. Tidsfunktionen för? Färgen? egendom är linjär medan bakgrunden? Egenskapen är tilldelad inlåsningsfunktionen.
För mer information om detta exempel, kolla in NetTuts-artikeln om CSS3-övergångar.
Komma igång: HTML
Det första vi gör är att kasta ner en grundläggande tom XHTML-mall (vi kunde lika lätt använda HTML5 men jag bestämde mig för att fokusera på en ny teknik i taget).
När du har fått din tomma mall, har du tagit bort, lägg till en enda div för att hålla texten. Skriv vad du vill ha i det här området, var noga med att lägga till några länkar så att du kan få full effekt av övergångarna.
Det är allt! Som jag sa tidigare bygger vi ett extremt enkelt exempel så det är all HTML som du behöver. Jag gav div a klass istället för en id så du kan enkelt lägga till andra områden på sidan som kommer att överföra denna funktionalitet.
Grundläggande CSS
HTML har bara resulterat i en enda, tråkig paragraf vid den här tiden så vi kommer att lita mycket på CSS för att göra sidan mer attraktiv.
För att börja, lägger vi till några grundläggande styling direkt till kroppen.
Här har vi satt några grundläggande stilar för bakgrunden, textbehållaren och länkarna i textbehållaren. Vi gav bakgrunden en riktigt mörkgrå färg, gjorde texten vit och använde Chris Coyiers Better Helvetica-utdrag för att ge oss en fin fin text.
Slutligen har vi stylat länkarna så att de är ljusgråa och inte har någon textdekoration. Här är vad du borde ha just nu:
Nästa utvidgar vi textContainer-sektionen genom att ge den en tunn kant och anpassa den till mitten av sidan. Den här sista delen (centrerar allt på sidan) uppnås genom att ge div en bredd och ställa in marginalen till auto. Se till att du centrerar justera texten så att den inte hänger på vänstra sidan av div.
Detta borde ge dig det grundläggande utseende du såg i demo.
Lägga till magi
Nu när vi har utformat vår sida i grunden, vill vi lägga till några färgtransitioner för att uppleva saker. Den första platsen vi vill kasta i en övergång finns i huvudtexten Container. Vi använder samma kod som vi såg i förklaringen av CSS3-övergångar ovan.
Detta kommer att sätta en övergång på alla förändringar som vi gör till? Färgen? eller? bakgrund? egenskaper, med en en-sekunders övergång och två olika tidsfunktioner: linjär respektive inlämning.
Därefter ställer vi över en övergång till länktexten så att alla ändringar vi gör i denna färg kommer att utlösa en andra övergång.
Som nämnts ovan kommer denna kod i sig inte att göra någonting. Det här håller bara ett öga på eventuella ändringar av de angivna egenskaperna. När en förändring uppstår på grund av andra CSS-kommandon kommer den att övergå den med dessa inställningar.
Katalysatorn
När du ställer in övergångar behöver du en händelse för att utlösa övergången. I CSS är en av de enklaste och mest vanliga händelserna att arbeta med en svänghändelse. Även om svänghändelser brukar tillämpas på länkar (som vi ska göra), applicerar vi också en helt enkelt till div som helhet, så när musen går in överförs övergången.
Eftersom vi redan har ställt in övergångskommandona är hoverhändelserna väldigt enkla och använder endast några rader av kod för att ändra färgerna runt. Först ska vi ta itu med div hover-händelsen.
Detta gör det så att när någon markör kommer in i div, ändras textfärgen till mörkgrå och bakgrunden ändras till vit. Våra länkfärger förblir dock för närvarande lika gråa som de var före svängningsevenemanget. Lägg till följande kod för att ändra detta.
Detta ställer in det så att när en svänghändelse inträffar i .textContainer ändras alla länkar till en ljusblå. Slutligen vill vi ställa in färgen på den ljusblå texten för att mörkas gradvis när du svävar över den.
Observera att det finns en stor skillnad mellan .textContainer: sväva a och .textContainer a: svävar. Den förstnämnda påverkar länkfärgen när musen kommer in någonstans i diven och den senare påverkar länkfärgen när du bara sveper länkarna.
Det avslutar också vår CSS. Nu när du anger div med musen, ska bakgrunden gradvis blekna till vit, texten ska bli mörkgrå och länkarna ska bli ljusblåa. Då ska du gradvis bli mörkare när du svävar över en länk.
Slutsats
Jag hoppas att den här artikeln har gett några idéer i ditt eget huvud för några roliga saker att göra med CSS-övergångar. Låt mig veta i kommentarerna nedan vad du tyckte om den totala effekten och hur du skulle förbättra den. Också se till att dela alla länkar du har till andra CSS3-övergångsexempel.