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 {
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

Leave a Reply