Låt oss avsluta veckan med något kul ska vi? CSS keyframe-animationer har för närvarande mycket begränsat webbläsarstöd, men de är fortfarande ganska intressanta att lära sig om och experimentera med.
Nedan bygger vi en enkel webbsida som använder Webkit keyframe-animationer för att försiktigt flytta bakgrundsfärgen på en aldrig sluten slinga. Fascinerad? Läs vidare!
demo
För att få en snygg titt på vad vi ska bygga idag, klicka på länken nedan.
Live-demo: Klicka här
Keyfame Animationer: Fortfarande bara för skojs skull
Med CSS3 är det lätt att få en färg att blekna in i en annan, säg på ett hover-kommando. Ställ in två olika färger, kasta i en övergång och du är bra att gå. Men vad händer om vi vill ha något som ständigt förändrar färgerna? Svaret ligger i nyckelbilder.
För närvarande är stöd för keyframe-animationer i CSS ganska lågt. Faktum är att du verkligen kan bara tjäna på det som fungerar i Webkit-webbläsare som Safari och Chrome (Firefox 5 bör också se stöd). Så den olyckliga delen är det, som med många CSS3-tricks, är det inte helt klart att använda i produktion om du inte är helt förberedd för att många användare missar erfarenheten.
Hur Keyframes Work
Keyframe-animationer är en av de mer komplicerade nya funktionerna i CSS. Det känns faktiskt lite mer som programmering än styling, till och med till nästan deklarerar en variabel! Låt oss göra en snabb och smutsig genomgång för att se hur de fungerar.
Det första du vill göra är att förklara webkit keyframe-blocket och namnge din animering.
Som jag antydde ovan är ditt animationsnamn nästan som en variabel som du kommer att ringa på senare så se till att det är både beskrivande och lätt att komma ihåg. Till exempel, för vårt experiment, kan vi använda namnet? ColorPulse ?.
Nästa, vi fyller detta är med en slags tidslinje för vår animering. Tänk på det som att förklara keyframes precis som du skulle i ett animationsprogram, bara här använder du ren kod. Procentandelarna representerar objektets tillstånd vid den punkten av animationen.
Här animerar vi uppenbarligen bakgrundsfärgegenskapen. Vid 0% skulle färgen vara röd, vid 50% skulle den vara vit och vid 100% skulle den vara blå. Alla tweening görs automatiskt så att allt som lämnas är att ange animationen till ett visst element och definiera beteendet. Här tillämpar vi den på en div.
Som du kan se använde vi namnet på animationen, det här gäller de saker som vi satt upp tidigare. Därefter ställer vi in varaktigheten (10 sekunder), antalet iterationer (oändlig) och riktning (alternativ). Den senare av dessa kommer att orsaka animationen att springa bakåt och framåt: röd, vit, blå, vit, röd, vit, blå, etc.
Detta är egentligen bara stenografi för dessa deklarationer. Du kan också ställa in dem en i taget. Här är en större lista över animeringsegenskaperna som du kan definiera:
Pulsande hemsida bakgrund
Nu när vi har en känsla för hur det här fungerar, låt oss ta det vidare genom att bygga ett riktigt exempel. Vi börjar med att utforma en grundläggande siddesign och avsluta med att lägga till i vår animering.
Bakgrundsfärg
För att designa sidan måste vi välja en bakgrundsfärg. Det här är en intressant uppgift med tanke på projektet. Vårt mål är att skapa en bakgrund som pulserar från en färg till en annan. Jag kan inte tillräckligt betona hur farligt detta är ur en designers perspektiv. Du är nästan dömd för att skapa något så fult att ingen kan titta på det!
Det bästa sättet vi kan närma oss här är från en subtilitet. Vi vill ha långa, smidiga skift som är glädjande och inte krossade. Om vi väljer färger som är för djärva eller ljusa, bränner vi tittarnas ögon.
Sedan vi precis gått över Easer ligger mitt sinne i pasteller och det hände mig att en sådan palett kan vara perfekt för det här projektet. Jag sparkade upp Kuler, sökte efter? Pastell? och hittade följande palett.
Dessa är de färger vi ska använda för vår bakgrund. När det kombineras med ett riktigt långsamt skift, borde det ge oss en ganska mild och attraktiv effekt.
Grundläggande HTML
Att skapa grunden för vårt experiment skapade jag min typiska clich? webbdesign layout: en rubrik, underrubrik och en bild. Vi behöver verkligen inte mycket, bara nog för att göra sidan inte otroligt tråkig.
Som du kan se placerar vi intervall på 0%, 25%, 50%, 75% och 100% så att vår animation är snyggt uppbruten.Vid varje stopp placerades en färg från vår Kuler-palett.
Därefter förklarade vi förutom att tillämpa en standard bakgrundsfärg, som kommer att fungera som vår backup, animationen. Lägg märke till att jag har satt den till en hel 40s. Återigen, eftersom det här har så mycket potential att vara en intensiv animation, vill vi att den ska vara väldigt långsam. Faktum är att jag ens gillar hur det ser ut när tiden är inställd på att dubbla det.
Färdig produkt
Och än en gång, bara om du saknade det ovan, här är den färdiga produkten. Lägg märke till hur trevliga övergångarna är från färg till färg. Sedan vi började med en fin palett är skiftningarna ganska naturliga och inte alltför distraherande.
Live-demo: Klicka här
Slutsats
Under de närmaste åren börjar du se mer och mer stöd för CSS-keyframe-animationer. Just nu fungerar de bra i Safari och Chrome, som konsekvent tjänar som en glimt till framtiden för HTML och CSS, och är i linje för att fungera med Firefox som @ -moz-nyckelbildrutor.
Syftet med den här artikeln var att få dig att tänka på alla de icke-traditionella animationer som du kan skapa med keyframe-animationer. Jag hoppas att du lärde dig en sak eller två och har blivit inspirerad för att skapa dina egna unika applikationer.