Getting familiar with one of new CSS3 tricks of the trade, the CSS3 Transition Delay offers a ton of new time based options.
Although it’s currently only fully compatible with webkit browsers like Safari or Google Chrome, transition-delay does look poised to make the jump to cross-platform bliss. When it does it adds a whole new layer to web design. Now you'll be able to bring the element of time delay to your web designs to create a more immersive experience.
Simple Example Using CSS3 Transition-Delay
.hd1, .hd2, .hd3, .hd4 {
position:absolute;
top: 0;
opacity: 1;
-transition-property: opacity;
-webkit-transition-duration: .4s;
}
.hd1 { background: url(/1.png); }
.hd2 { background: url(/2.png); }
.hd3 { background: url(/3.png); }
.hd4 { background: url(/4.png); }
.hd1 { -webkit-transition-delay: 1.5s; }
.hd2 { -webkit-transition-delay: 1s; }
.hd3 { -webkit-transition-delay: .5s; }
.hd1:hover { -webkit-transition-delay: .5s; }
.hd2:hover { -webkit-transition-delay: 1s; }
.hd3:hover, .hd2:hover,.hd1:hover{opacity: 0; }
.hd3:hover { -webkit-transition-delay: 1.5s; }
As you can see, in this example we are swapping 4 layers (.dl1 thru .dl4) sequentially with an absolute position. That means when a user hovers over an element, each layer sequentially fades away with .5 second delay. If you have even a little creativity in your core, your mind will easily start to race with all the perks of this CSS3 transition magic. Like a lot of other CSS3 rules, you'll need to do a little extra work to ensure cross-platform compatibility.
transition-delay: 2s; -moz-transition-delay: 2s; /* Firefox */ -webkit-transition-delay: 2s; /* Safari - Chrome */ -o-transition-delay: 2s; /* Opera */ -khtml-transition-delay: 2s; /* Konqueror */
For instance, this method will eventually boil down to...
transition-delay: 2s;
Once everything becomes "W3C Official", you'll be able to avoid all the browser specific additions. In the meantime, just take the extra time to ensure cross platform compatibility and start letting your imagination run on all the possibilities toying with time will allow your design.
More CSS3 Awesomeness on the Way...
While we didn't go into too much depth, hopefully this post gives you a hint of what will be coming down the pass. As always - Thank you very much for stopping by, feel free to shoot us any feedback through your favorite social media site, and if you've found this info useful please be sure to share.
