Jag är ett stort fan av CSS-övergångar. Visst kan de missbrukas men i stort sett är de ett riktigt bra och enkelt sätt att lägga till lite liv på dina webbsidor. Och låt oss möta det, de är plana ute roliga att leka med.
Jag har täckt övergångar på ett miljon olika sätt, men det finns en funktion som jag knappast berör: Övergångsfördröjningar. Varför vill du fördröja din övergång? Det visar sig att effekterna du kan uppnå blir mycket mer komplexa och imponerande när du införlivar den här extra parametern. Låt oss hoppa in och bygga några coola demoer för att visa hur det fungerar.
Vad vi bygger
Om du vill ta en titt på vad vi ska bygga idag, kolla in de tre demonerna nedan:
- Sekventiellt meddelande
- Ett brev i taget
- Gardin effekt
Syntaxen
Innan vi hoppar på att bygga någonting, är det värt att uppdatera oss på CSS-övergångssyntaxen. Det finns fyra olika parametrar förknippade med övergångar i CSS: egendom, varaktighet, tidsfunktion och fördröjning.
Du kan ange värdena för var och en av dessa egenskaper individuellt med hjälp av syntaxen nedan. Tänk på att du vill köra den här koden genom Prefixr för att se till att du har täckt de olika webbläsarna.
Även om detta är det enklaste sättet att förklara en övergång, är det verkligen ett fruktansvärt skrymmande sätt att ta itu med det. När vi tar hänsyn till alla de olika nödvändiga prefixen blir denna bit av kod enorm:
Som du kan se är det här en massa mycket kod för en enkel övergång. Av denna anledning använder kodare vanligtvis den mycket mer koncisa stenversionen. Med den här metoden kan vi ta den stora delen av koden ovan och konvertera den till följande, mycket mer hanterbara kod.
Shorthand-syntaxen
För att vi är alla på samma sida, här är en visuell uppdelning av övergångshorthand.
Som du kan se är den traditionella metoden att lista den egendom som du vill aktivera övergången på, följt av övergångens varaktighet, lättnadsfunktionen och slutligen förseningen. Denna syntax är dock inte super strikt. Du kan till exempel byta positionen för lättnadsfunktionen och fördröjningen och övergången kommer fortfarande att fungera. Den order som visas ovan är emellertid från den officiella specifikationen så jag rekommenderar att du håller fast vid den.
En sak som jag ofta gör är helt enkelt att lämna av förseningsegenskapen. Det är normalt noll sekunder, så om du inte vill ha någon fördröjning kan du helt enkelt skriva följande:
Övergångens kraft förseningar
Nu när vi förstår syntaxen bakom övergångar, låt oss prata om varför i världen skulle du vilja ha en fördröjning vid en övergång. Det kan finnas flera anledningar till att du kanske vill använda den här egenskapen, men den som jag kommer att fokusera på idag är att utföra komplexa animeringar som innefattar flera steg. Vi har spelat med flera steg övergångar lite i tidigare artiklar men idag kommer vi verkligen ha kul.
I grunden är konceptet här att du utlöser två eller flera övergångar på en händelse, men använd förseningar för att få dem att uppträda vid olika tidpunkter. Så låt oss säga att vi har vår första övergångssats att hålla i en sekund, så kan vi sedan sätta en fördröjning på en sekund på vår andra övergång så att den börjar så snart den första slutar. Resultaten kan vara ganska imponerande!
Sekventiellt meddelande
Den första tanken som dyker upp i mitt huvud för att utnyttja förseningar är att skapa ett slags meddelande som presenterar sig för användaren en bit i taget. Låt oss säga att vi vill ha tre bitar av text som flyger in och ut ur en div vid olika tidpunkter. Det första steget är att ta reda på hur allting fungerar så att du kan bryta dig om det.
- Standard meddelande:? Höger här?
- En sekund flyger ut? Höger här?
- Vänta en sekund, flyga sedan i andra meddelandet:? Hälsningar !?
- Vänta två sekunder och flyga sedan i tredje meddelandet:? Hur mår du ??
- Höger ut återgår till standardmeddelandet
Som du kan se instruerar vi först användaren att sväva över diven och flyga sedan svängmeddelandet som två andra meddelanden flyger in, den första kommer att vänta en sekund och den andra väntar två sekunder.
html
För att få denna demo till liv behöver vi en div som innehåller tre olika stycken som så. Självklart, om du använde detta är ett live-projekt, skulle du vilja tillämpa en klass eller ett ID, men jag kommer att hålla det enkelt här.
CSS
För att starta CSS ska vi ställa in div och stycken. Det finns några viktiga saker att tänka på.Först märker du den relativa positioneringen och det dolda överflödet på div, dessa är viktiga så var noga med att inkludera dem.
Observera att jag absolut har placerat textobjekten och tryckt dem upp och ut ur gränserna för diven så att de inte är synliga som standard. Jag inkluderade också en helt frivillig snygg Sass 3D-effekt. För fullständig mixin, kolla in den här artikeln.
Nu är det dags att knyta vår första stycke på plats och skapa vår första övergång. För att göra detta använder vi nth-barnväljaren för att rikta in den första stycket (? Höger här?). Placera den femtio pixlarna från toppen, lägg till en sekunds övergång utan fördröjning och skapa en svängningseffekt som zoomar bort den.
För att avsluta den här demo måste vi skapa en svängnings händelse för andra och tredje stycket. De är i grunden desamma, bara se till att? Hälsningar? stycket har en sekunds fördröjning och hur? stycket har två sekunder fördröjning. Också se till att placera sista stycket längre ner.
Live-demo
Det är allt det finns! Nu ska vi kolla in live demo på Tinkerbin. Här kan du se och tweak koden, var noga med att leka och se vad du kan komma med!
demo: Klicka här för att starta. Observera att du måste ändra CSS-läget till? Sass? och hit? Kör? för att se 3D-texteffekten.
Ett brev i taget
För det här kommer vi bara att använda ett enda meddelande. Dock kommer varje brev i meddelandet att flyga på plats individuellt. Resultatet blir riktigt coolt och väldigt annorlunda än vad du traditionellt ser gjort med CSS.
html
Tyvärr har CSS inte ett bra sätt att rikta in enskilda bokstäver i en sträng (ännu), så vår HTML måste bli allt rörig med spänner. Det är en smärta och koden ser lite slarvig ut, men det är det bästa vi kan göra utan att få JavaScript in i bilden, vilket ligger utanför handledningen.
CSS
Vår första bit av CSS kommer att skapa vår div, precis som förra gången, och stila bokstäverna. Jag använder Google Web-typsnittet? Bree Serif ?. Jag ställde också opaciteten till 0, positionen till absolut och omvandlade texten till stor bokstav.
Nu måste vi tillämpa en annan övergång till varje enskilt brev. För att uppnå detta, använd nth-barnet precis som förra gången och rikta in spannarna. Lägg märke till hur den primära skillnaden här är att förseningen minskar varje gång, börjar vid 0,4 och går ner till 0.
För att avsluta den här måste vi förstklara vad som händer när vi svävar över div. Jag satte spännerna för att ha en opacitet av 1, förde dem in från vänster och roterade dem 360 grader så att de snurra på plats.
Härifrån är allt som finns kvar att skjuta varje enskilt brev på plats på svävaren. När det är klart kommer en enkel svängningshändelse att få alla bokstäver att synas och snurra på plats och våra förseningar kommer att se till att allt detta sker sekventiellt.
Live-demo
Med det är vi alla färdiga. Var noga med att stanna genom demon nedan och sväng över div för att se animationen och tweak den för egna användningar.
demo: Klicka här för att starta.
Gardin effekt
Nu får du kärnan på hur allting fungerar, så jag kommer inte att borra dig med mer förklaring, men jag kom upp med en mer demo som jag tyckte var kul. Den här använder en stack av bilder som gradvis faller för att avslöja den slutliga bilden på botten av stapeln. Det är en förskjutet gardin effekt som definitivt är mycket mer än du förväntar dig att få på en enda CSS-svängare händelse.
demo: Klicka här för att starta.
Hur använder du övergångsförseningar?
Nu när du ser några av de idéer som jag har haft för att kreativt använda övergångsförseningar, skulle jag gärna se vad du har kommit med. Lämna en länk nedan och visa mig vad du har!