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.