CSS3 Transition-Delay
In another round of CSS3 experimentation, I wanted to see if it was possible to sequentially transition the opacity of 3 or more elements via CSS without having them all begin fading at once. While it seems painfully obvious now, I wasn’t aware that the transition-delay property existed. It’s only compatible with webkit browsers like Safari or Google Chrome at the moment. In this example, I’ve got 4 layers (.dl1 thru .dl4) stacked via position: absolute. When you hover, each layer sequentially fades away with .5 second transition-delays.
Here is the CSS from my initial example:
.dl1, .dl2, .dl3, .dl4 {
position:absolute;
top: 0;
opacity: 1;
-transition-property: opacity;
-webkit-transition-duration: .4s;
}
.dl4{background: url(/4.png);}
.dl3{background: url(/3.png);}
.dl2{background: url(/2.png);}
.dl1{background: url(/1.png);}
.dl3{-webkit-transition-delay: .5s;}
.dl2{-webkit-transition-delay: 1s;}
.dl1{-webkit-transition-delay: 1.5s;}
.dl3:hover, .dl2:hover,.dl1:hover{opacity: 0;}
.dl3:hover{-webkit-transition-delay: 1.5s;}
.dl2:hover{-webkit-transition-delay: 1s;}
.dl1:hover{-webkit-transition-delay: .5s;}
I began this experiment as a part of a combination of CSS3 visual effects that I may throw together as an Easter egg bit to a personal site. At the moment, I wouldn’t recommend using this unless it provides for interaction with purely bonus content. For example, you could fade a series of alternate profile photos on a staff contact page. Here, I’ve created a scenario showing the design process of a recent blog post from initial sketch to final product.
11 Responses
Stellar. I love the possibilities of layering comps like you suggest.
Wow, nice. That completely does away with the need for javascript to create a simple slideshow (if all browsers were compliant, that is)
Hey Trent, great job with this. I will definitely apply this on my portfolio redesign as an Easter egg. Those are always fun.
Keep it up. I want more!
It would be great if you wanted to make a three- or four-frame animation on hover (the first thing that comes to mind is an image of some business-person who gives a quick smile before you click).
Hi, nice article again
Can I ask what the font is on the top example?
Thanks
Tom
Of course: Coffee Service
Thanks!
Have to say i think it looks much better in your example than the sample on myfonts
Tom
These are really great, Trent!
These are all pos-absolute, right?
Imagine the variations named via standard wipe styles:
fade through color;
crossfade;
slide-fade vertical/horiz;
…etc., etc.,…
In other words, some you can “fade one out, and one in”, others you can just hide from the stack and the one beneath reveals…
Magical.
Thanks, Luke. I just updated the post- adding position absolute. Silly that I missed that gaping hole... if you put any content in those divs they’d need it.
This is really fabulous! I’ve been loving your experimentation with CSS3.
This one, in particular, helped me get out of using Flash–so many, many thanks! My iteration of it is in the main logo/button’s hover state at http://bradispiller.com if you’re interested.
Cheers,
Andrew
Andrew, thanks for commenting. That’s a clever usage... I dig it.