CSS3 har medfört ett antal estetiskt imponerande nya funktioner. Kanske den roligaste av dessa att spela med är CSS-animering, vilket gör att du kan utföra många rörelsesbaserade funktioner som normalt delegeras till JavaScript. Gå med i min episka strävan att upptäcka den coolaste, mest innovativa och viktigare, nerdiest användningen av CSS-animering på webben. Börja!
Varning: Dessa animeringar är ganska webbläsarspecifika, så om du surfar i IE6 är det dags att sluta titta på Saved By The Bell, gräva uppringningsanslutningen och ladda ner en modern webbläsare.
Roterande polaroids
Denna handledning visar dig hur man skapar en fantastisk, animerad hög med fotografier med hjälp av massor av nya CSS3-kommandon. Vi har en stark start, den här är svår att slå.
Klicka för att visa demo
Matrisen
Följ den vita kaninen? fel jag menar, kolla in denna fantastiska Matrix animation. Inte riktigt trogen på filmen (de enskilda tecknen ändras inte), men imponerande ändå. Att se hur Matrisen är en av de bästa sci-fi-flickorna hela tiden (jag talar om den första filmen, inte de andra två katastroferna), den här kommer att hoppa överst på vår lista och utan tvekan stanna där ett tag tills en värdig konkurrent kan hittas.
Klicka för att visa demo
Trippy Spinning Column of Fun
Den här galna animationen har en spinnkolumn som består av roterande rader av färgade lådor och text. Den övergripande effekten är galen sval och otvivelaktigt yrsel. Den här är lite för knäckt för att stjäla åskan från The Matrix men mästaren förblir.
Tips: För en ökad risk för rörelsesjuka, rulla upp och ner och skaka huvudet fram och tillbaka medan du tittar på animationen (vi är inte på något sätt ansvarig för någon förstörd hårdvara du äger efter att du kastar din lunch över ditt skrivbord).
Klicka för att visa demo
DJ Hero
Denna handledning kombinerar CSS3 och jQuery för att skapa spinning-poster. Med kontrollerna på skärmen kan du styra hastigheten på posterna eller helt enkelt ta en post med musen för att lägga ner några grova repor.
Virtuella skivspelare på en vintage träbakgrund? Detta kan vara en ganska stor konkurrent folk, denna debatt är uppvärmning. Fortsätt klicka på den. Du vet att du vill spela.
Klicka för att visa demo
3D-animerad kub
Med denna kan du använda piltangenterna för att styra rotationen av en 3D-kub. Först trodde jag att det var ganska lamt men då insåg jag att du kunde hålla ner piltangenterna för att göra det freak out och gå in i turbospinnande dödsläge, vilket uppenbarligen löste in det lite. Mega stil poäng för att inkludera Sonic The Hedgehog också.
Klicka för att visa demo
Rakettskepp
Ett raketfartyg som utan tvekan fört med dig av MS-Paints underverk flyger över himlen med hisnande fart. Ungefär? I verkligheten är det sorts floats längs, transporteras av ett konstigt, rektangulärt kraftfält med prickade linjer. Cirka halvvägs genom animationen försvinner raketen praktiskt taget utan uppenbar anledning, så det är uppenbarligen en topphemlig högteknologisk stealth raket med beväpnad kåpanhet för att avvärja invaderande vulkanförstörare.
Inte exakt en seriös konkurrent. Faktum ärför, varför visade jag det ens till dig? Och ännu mer relevant, finns det en sådan sak som en vulkanförstörare eller gjorde jag bara upp det?
Klicka för att visa demo
Väder
Snö
Löv
Låt oss slå alla väderleksaker ut på en gång ska vi? Där det finns ostliknande animationer finns det också det oundvikliga fallande snö, löv, regn osv. Får mig inte fel, det här är ganska coolt och kan leda till några riktigt bra säsongsmässiga webbplatsändringar. Men dessa särskilda avrättningar, men väl gjorda, är inte så kreativa med kontext. Låt mig veta om du skapar en webbplats som har jätte hagelband som förstör allt innehåll på sidan, nu skulle det vara något.
Klicka för att se snödemo
Klicka för att visa bladdemo
Täckflöde
Denna animation efterliknar Apples täckflöde med en hybrid CSS / jQuery-teknik som DJ Hero-exemplet ovan. Genom att imitera Apple fungerar den bra i både de coola och nördiga kategorierna och gör också ett jobbigt jobb vid att vara innovativa (det här är den enda CSS3 Cover Flow fake jag kunde hitta). Vi har ännu en konkurrent på våra händer.
Klicka för att visa demo
Star Wars Crawl
Det är det, spelet över. Jag skulle vilja tacka de andra deltagarna för att spela, men den här tar priset. Det är öppningsplatsen från freakin 'Star Wars för att gråta högt? i HTML och CSS (det är live text du ser på dåre). Jag frågar dig, vilken bättre användning av CSS-animering kan det vara? Jag föreslår att det inte finns någon. Lita på mig, visa detta till din nördaste vän och han kommer att omvandla magiskt till en 4 årig på julmorgon.
Klicka på Epic View Demo
(Safari + Snow Leopard krävs)
Slutsats
För de av er som tycker att denna tävling var riggen har du rätt. Jag slog upp tävlingsidén efter att ha hittat Star Wars-exemplet för att bara markera hur mycket allt annat var i jämförelse. Den verkliga avsikten med artikeln är att visa att det inte finns något slut på de coola sakerna du kan bygga med de relativt enkla animeringsfunktionerna som är inbyggda i CSS3.
Använd kommentarerna nedan för att meddela vilken som var din favorit. Om du känner till några andra exempel kan du också dela dem!