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

Leave a comment or contact me via Twitter @TrentWalton

  • Bryan Rees

    Stellar. I love the possibilities of layering comps like you suggest.

  • Chris Armstrong

    Wow, nice. That completely does away with the need for javascript to create a simple slideshow (if all browsers were compliant, that is)

  • Design Informer

    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!

  • Michael Kozakewich

    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).

  • Tom

    Hi, nice article again

    Can I ask what the font is on the top example?

    Thanks
    Tom

  • Luke Dorny

    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.

    • Trent

      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.

  • Andrew Austin

    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

    • Trent

      Andrew, thanks for commenting. That’s a clever usage... I dig it.

Leave a Reply