Flerstegs CSS-animeringar är enkla med nyckelbilder, men vad händer om vi vill använda vanliga gamla övergångar för att uppnå en liknande effekt? Vidare, hur tar vi en enskild svänghändelse och översätter den till flera animeringar på olika element?
Svaret ligger i att använda begravda hovers, ett enkelt och effektivt trick du borde definitivt prova.
Inspirerad av faktiska händelser
Chris Coyier från CSS-Tricks tjänar oftare som inspiration för mina artiklar än kanske någon annan författare. Mannen vet ett ton om CSS och jag lär mig alltid mycket av hans artiklar.
Nyligen publicerade han en bit på CSS som vanligtvis förvirrar nybörjare och i det förklarade han kortfattat vad han kallade "begravda hovers". Jag hade ärligt talat aldrig någonsin funderat på att använda en svävareffekt så här förut och var ivriga att utforska konsekvenserna. Följande är resultatet av den undersökningen.
Vad är en begravd Hover?
Konceptet bakom en begravd sväva är ganska enkel. Den allmänna tanken är att vi vanligtvis ändrar objektet som svävar över. Här är ett exempel:
Här har vi en enkel länk som ändrar färg på svävaren. Det visar sig emellertid att vi inte nödvändigtvis behöver byta objekt som vi svävar över men kan faktiskt välja istället att ändra en av sina efterkommande. Låt oss se hur det här ser ut:
Här verkar förklaringen nästan densamma men har en dramatiskt annan effekt. När användarens mus kommer in någonstans i förälderbehållaren ändras alla länkar i den behållaren omedelbart färg.
Det är viktigt att notera att IE6 inte stöder icke-länkhovers. Det är också viktigt att notera att IE6 är en smutsig, okej ursäkt för en webbläsare dessa dagar och inte riktigt berör mig så mycket som undervisningen går.
Simulera en Keyframe Animation
Nu, när jag förstod att ovanstående var möjligt, började min hjärna genast börja med den mest komplicerade genomförandet av detta scenario som jag kunde komma med.
Enkla användningsfall för denna metod är praktiskt, men du kan förmodligen komma upp med dem själv. I stället ville jag göra något roligt. Resultatet är ganska opraktiskt och har inte det bästa webbläsarstödet, men uppfyller målet att verkligen få dig att tänka på att kreativt tillämpa begravda hovers.
Den grundläggande idén som jag kom fram med är att simulera en webkit-nyckelbildruta-animering med enkel övergångsbaserad CSS3, som har mycket bättre stöd. Resultatet blir en komplex, multi-stegs animering som avstängs av en svängnings händelse. Varför? Eftersom vi är alla nördar här och det blir roligt att bygga, det är därför.
Komma igång: HTML
Vi behöver knappast någon HTML för det här projektet. Allt jag gjorde var att skapa en behållare med en rubrik och några stycken. Vårt mål är att utlösa flera animeringar när användaren svävar över div.
Grundläggande CSS
Dessa stilar är mestadels godtyckliga och kan ändras som du vill. Jag satte en fin mörk bakgrunds grafik, skapade en synlig ruta och definierade texten i texten.
Vid den här tiden ser den levande förhandsvisningen ut som bilden nedan. Som du kan se, översvämmer texten över rutan, men det är helt bra eftersom vi ändrar det här om en minut.
Styling the Header and Paragraphs
Här är grunden för vår animering: rubriken sitter ensam vertikalt centrerad i behållaren. På svävaren försvinner rubriken och punkterna blekna i en i taget.
För att göra detta ska vi först placera huvudet absolut. Detta gör det möjligt för oss att placera rubriken där vi vill ha det utan att påverka de tre styckena nedan.
Observera att inställningen av linjens höjd lika med behållarens höjd centrerar huvudet vertikalt inom div.
Därefter vill vi gömma våra stycken från vy. Vi kommer att blekna dem från osynliga att synliga så jag använde opacitetsegenskapen för att uppnå detta.
Resultatet ska vara något som visas nedan, med endast rubriken synlig inuti behållaren vid denna punkt.
Definiera animationerna
Nu när vi har allt lined upp förutom att våra siktlägen är kvadrade bort är det dags att avsluta med att animationerna fungerar.
Vi börjar med att definiera vår rubrikövergång med de olika webbläsarprefixen. Därefter använder vi vår första begravda svävar! Återigen är tanken att när behållaren svävar över börjar animeringarna. Med detta i åtanke använder vi behållare: sväva h2 för att skapa en händelse som bara gäller vår rubrik.
När vi väl har vår huvudmål riktade vi det upp och bleknade sin opacitet till noll.
Animera styckena
Här kommer den knepiga delen.Vi har tre olika stycken och vill blekna dem i en i taget. Vad vi behöver göra är att rikta var och en och försvaga dem i olika hastigheter.
Eftersom vi inte gav några av punkterna ett speciellt ID eller en klass, använder vi n: te-barn att fånga var och en av dem individuellt. Eftersom animationerna inte stöds av IE ändå kommer det inte att vara ett problem.
Animeringarnas specifika längder är lite konstiga. Jag hade ganska mycket att lura med hur huvudet bleknade och de bleknade tills jag hittade något jag tyckte om. Dessa siffror verkar fungera bra:
När användaren svänger över behållaren vill vi att styckena ska dyka upp, så det sista steget är att använda en annan begravd svävare för att rikta in stycke-taggarna. Vi använder .container: sväva p att rikta in punkterna på svävar och föra upp sin opacitet. De animeringar som vi satt upp i föregående steg kommer att göra att övergången blir fin och gradvis.
En sak som är trevligt om alla dessa animationer är att de ser lika bra ut i omvänd när du tar musen ut ur div. Punkterna bleknade och rubriken glider in igen. Ganska snyggt!
Ta en titt
Den levande demo är lite mer komplicerad men den använder samma teknik som exemplet ovan. Tyvärr Internet Explorer-användare, som alltid, inte kul för dig.
Live-demo: Klicka här för att starta.
Slutsats
Med hjälp av begravda hovers kan vi uppnå många riktigt intressanta och unika CSS-tekniker som du kanske har kämpat med tidigare. I den här artikeln användes en begravd svängare för att utlösa flera CSS-animeringar på olika element för att visa hur komplexiteten av effekter som du kan implementera.
Lämna en kommentar nedan och låt oss veta hur och om du använder begravda hovers.