CSS keyframe-animeringar öppnar ett stort antal möjligheter för vad som kan åstadkommas med CSS. Mycket mer än enkla, enstegsövergångar, nyckelbilder kan användas för att uppnå komplexa, flerstegsanimeringar som är ganska imponerande.
I dagens projekt kommer vi att börja från början och bygga en stapel med två bilder som sprids ut och byta ut sin stackningsordning när du svävar över dem. Längs vägen lär vi oss allt om hur man använder keyframes som ett proffs och jonglera alla de huvudspinnande prefixen!
Vad vi bygger
Konceptet för detta projekt är ganska enkelt. Tänk dig två bilder, slumpmässigt roterade och staplade ovanpå varandra som om du hade kastat dem på ett skrivbord. Problemet är att du bara kan se fotot på toppen!
För att hjälpa det nedre fotot får du den uppmärksamhet som den förtjänar, vi kommer att skapa en svänghändelse som först skiljer de två bilderna och släpper det översta fotot bakom det nedersta fotot och ändrar effektivt staplingsordningen.
Odds är, om du läser den här bloggen, är du en visuell tänkare, så här är hur det ser ut i bilderna:
Keyframe Animationer vs Övergångar
CSS har för närvarande två primära alternativ för animering av ett element: övergångar och nyckelbilder. Varje gång du vill animera någonting måste du analysera situationen och bestämma vilken metod som är lämplig. Lyckligtvis är det lätt att bestämma mellan de två.
Varje gång du har en enkel animering med bara ett steg, är en övergång den perfekta lösningen. Till exempel, om du vill att något ska rotera något när du svävar över det, skulle du förmodligen dra av effekten med en övergång. Du ställer bara in det ursprungliga tillståndet, då det roterade tillståndet och övergången mellan de två.
Tänk nu att du ville ta den här idén ytterligare och skapa en animerad ratt som du skulle se för att spricka ett säkert. Du skulle nog vilja att den snurra medurs för en sekund, sedan moturs, sedan kanske medurs igen, du får idén. För detta scenario vill du definitivt gå med en keyframe-animation.
Vilka ska vi använda?
Ovan skisserade vi animationen som vi vill uppnå. Självklart kommer det att bli ganska komplext. Flera objekt kommer att röra sig fram och tillbaka, rotera och byta sin staplingsordning. Med tanke på denna komplexitet är keyframe-animationer det naturliga valet.
Browser Support
Det är bra att komma ihåg att både nyckelbilder och övergångar nu har ganska anständigt stöd på de stora webbläsarna? utom för kursen för IE. Såvitt jag kan säga kommer inte övergångar eller animationer att stödjas förrän IE10, så du vill självklart inte lita på dem för någon större funktionalitet.
Källa: CanIUse.com
Steg 1. HTML
Nog bygga upp, låt oss hoppa in i byggandet av denna sugerör. Det första du gör är att lägga ut projektet i HTML. Detta är förstås mycket enkelt. Allt vi behöver är en behållare med två bilder.
Avstämning
Vid denna tidpunkt är all vår visuella basstyling färdig. Du borde ha en fin liten tvåfotostack som ser något ut så här:
Steg 5. Planera animationen
Nu när vi har satt bilderna som vi vill, måste vi planera ut detaljerna om hur vi ska få dem att röra sig. Eftersom det finns två bilder måste vi planera de specifika rörelserna för varje.
Pic One
Den första bilden börjar på botten av stapeln. Huvuddelen av rörelsen kommer att ske på det andra fotot, men jag vill få den här att se ut som den rör sig ur vägen och gör plats för den andra, så vi roterar det något.
Utan att bry sig om den faktiska syntaxen, låt oss planera ut varje steg. Keyframes använder procentandelar för att rita ut animeringen, så det är vad vi ska använda här.
- 0%: rotera (-7deg)
- 50%: rotera (-14deg)
- 100%: rotera (-7deg)
Som vi kan se börjar vi med vår standardrotation på -7, därefter övergång till en rotation på -14 och slutligen rotera tillbaka till var vi började.
Pic två
Det andra fotot är mycket mer komplicerat. Den här gången vill vi flytta fotot några hundra pixlar till höger medan du roterar det, byta det till botten av stapeln och sedan ta tillbaka det där det började medan du stannade på botten. Så här ser det här ut:
- 0%: vänster 100px, z-index 1, rotera (7deg)
- 49%: kvar 350px, z-index 1, rotera (20deg)
- 50%: vänster 350px, z-index -3, rotera (20deg)
- 100%: vänster 100px, z-index -3, rotera (7deg)
Observera att stegen vid 49% och 50% är identiska bortsett från z-indexvärdet. Vi vill inte att detta foto ska hoppa till botten av stapeln tills det är ute av vägen för den andra, så vi måste flytta ut det innan vi hoppar ner det.
Koda animationen
Nu när vi planerat planerat ut animeringen är det dags att faktiskt koda upp CSS-versionerna. Med hjälp av de framsteg som vi just kommit fram till visar det sig att det är ganska enkelt. Kom ihåg att detta bara definierar animationerna, vi ska implementera dem senare.
Prefix Mayhem
Den absoluta värsta delen av att använda keyframe-animationer i CSS är den röra av kod som du måste använda för att dra bort dem över alla möjliga webbläsare. Koden som vi just skrev är enkel nog, men nu måste vi repetera det med alla de olika prefixen.
Det finns faktiskt en viktig lektion här, så det här är bra praxis. Den svåra delen är att vi har inbäddat en egenskap som behöver prefixa (transformera) inuti en annan (@keyframes). Detta leder till stor huvudvärk. Och med stor menar jag över två hundra rader av kod stora.
? Detta leder till en stor huvudvärk. Och med stor, menar jag över två hundra rader av kod stora.?För fragmentet ovan måste vi expandera alla rotationerna så att de har alla fyra stora prefix (webkit, moz, o och ms). Då måste vi repetera hela saken samtidigt som du lägger till de lämpliga prefixen till @keyframe-raden, men inom varje av dessa behöver du bara den normala roterande egenskapen tillsammans med prefixet som matchar prefixet för parent keyframe. Förvirrad än? Jag med.
Lyckligtvis är Prefixr här för att rädda dagen. Ta tag i standardsyntaxen ovanifrån och släpp den in, då kommer alla de olika bitarna som du behöver för att göra detta arbete.
Skojar du?
250 + kodkod bara för att definiera några enkla animeringar? Vad rökning jag? Tyvärr, om vi vill dra av det här med CSS, så behöver vi tills nyckelbilder blir en standard, icke-prefixad funktion.
Lektionen här är att vara försiktig när man lägger till komplexitet i nyckelbilderna eftersom det blir vansinnigt snabbt. Den andra lektionen är att jQuery fortfarande är den enklaste lösningen för att dra av enkla cross-browser animationer!
Aktivera animationerna
Att helt enkelt definiera keyframe-animationer gör ingenting att hända, vi måste implementera dem med animationen? syntax. För att göra detta använder vi animationssyntaxen.
Vi vill att detta ska hända när vi svävar över behållaren, så vi använder .container: hover, sedan differentiera baserat på klassen för var och en av våra bilder.
Här har vi kallade animationen med namnen vi ställde förut, ställ längden till en och en halv sekund, sätt iterationen till två och använd sedan alternativ så att den första iterationen går igenom stegen i ordning och den andra går igenom dem bakåt så vi hamnar där vi började.
Se det fungera!
Goda nyheter, vi är alla färdiga. För att se min fulla kod tillsammans med en levande demo, klicka på länken nedan.
demo: Klicka här för att starta
CSS Keyframes: Fortfarande inte helt där
I konceptet är det överraskande enkelt att dra av komplexa animationer med CSS. Syntaxen är enkel, flexibel och lätt att hämta.
Tyvärr är webbläsarsupporten fortfarande kortfattad där vi vill att den ska vara och koden som krävs för implementering kan bli rätt galen när du börjar integrera andra prefixade CSS-egenskaper i mixen tillsammans med nyckelramarna.
Med detta sagt, det var fortfarande en skvätt att bygga och om du gjorde det hela vägen är du utan tvekan en riktig proffs när det gäller keyframe-syntax!