1. Blog
  2. Design
  3. Concepts
  4. CSS3 Transition-Delay
CSS3 Transition-Delay

CSS3 Transition-Delay

Getting familiar with one of new CSS3 tricks of the trade...

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.

In this example, I’ll be swapping 4 layers (.dl1 thru .dl4) sequentially with an absolute position. When you hover, each layer sequentially fades away with .5 second delay. If you have even a little creativity in your core, you'll easily see all the perks this CSS3 trick will allow you...

Here's the CSS from my example:

.hd1, .hd2, .hd3, .hd4 {
    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; }

Like a lot of other CSS3 rules, you'll need to do a little extra work to ensure cross-platform computability.

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, will eventually boil down to...

transition-delay: 2s;

...once everything becomes "official". 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.

Related Articles
  • Beautiful CSS3 Button Set
    A concisely coded CSS3 button set increases usability across the board, gives you a ton of options, and keeps all the code involved to an absolute minimum.
    Beautiful CSS3 Button Set
  • How to use MAMP: Setting up MAMP
    Utilizing a local development environment is crucial for web developers, but it's not well documented. This guide to setting up MAMP will show you how to create your own PHP development server & how to use MAMP efficiently once you're all setup.
    How to use MAMP: Setting up MAMP
  • The Source Code Resources for Web Pros
    We've compiled the source code resources for web development's top web professionals. All house fantastic snippets of various languages that make it easy to view, sort, and download website source code.
    The Source Code Resources for Web Pros
  • Web Dos and Donts
    One of our favorite resources for web advice lately has been Web Dos and Donts. It covers a ton of categories...
    Web Dos and Donts
Written By:
Matthew Haeck

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade. (Matthew Haeck Bio Page)

Haeck Design - Stamp Logo