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 {<br /> position:absolute;<br /> top: 0;<br /> opacity: 1;<br /> -transition-property: opacity;<br /> -webkit-transition-duration: .4s;<br /> }
.dl4{background: url(/4.png);}<br /> .dl3{background: url(/3.png);}<br /> .dl2{background: url(/2.png);}<br /> .dl1{background: url(/1.png);}
.dl3{-webkit-transition-delay: .5s;}<br /> .dl2{-webkit-transition-delay: 1s;}<br /> .dl1{-webkit-transition-delay: 1.5s;}
.dl3:hover, .dl2:hover,.dl1:hover{opacity: 0;}<br /> .dl3:hover{-webkit-transition-delay: 1.5s;}<br /> .dl2:hover{-webkit-transition-delay: 1s;}<br /> .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.