Multiple CSS Transition Durations


When the ability to create animations and transition in CSS became available to webkit, I strongly resisted; claiming that “such behavior should be left up to JavaScript”. Even now, my main issue with transitions is that they use the same time-length value for the inbound effect as they do the outbound. For example, when you create a transition on an image with a 1-second duration, you get that length of time for both mousing over, and mousing away from the object. This type of behavior should be avoided, for the sake of the end-user!


My reasoning is this: For the user of a site to feel more comfortable, the page needs to feel fast. That is, to avoid having slow fade-in effects on objects (such as navigational elements) that go beyond .5 seconds for the animation to occur. Slow fades should be applied to post active (blur) states only because they can add a sensation of lag to a webpage, causing it to feel very muddy to the end-user. Nobody likes a muddy website.

Solving the Issue

To solve this, I experimented with applying a transition on :blur, thinking that altering the speed when the object was no longer in focus would resolve the problem. But, as you can see, I was disappointed with the results.

For example, this…


#anim_box {
	background: #eee;
	border: 2px solid #aaa;
	width: 300px;
	height: 300px;
	-webkit-transition-property: background-color, border-color;
	-webkit-transition-duration: .1s;
}
#anim_box:hover, #anim_box:focus {
	border: 2px solid #000;
}
#anim_box:blur {
	border-color: #aaa;
	-webkit-transition-duration: 2s;
}

...does not work!

It turns out that I was looking at the problem backwards. If I really want to have a 2-second fade-out on an object that “pops in” when moused over, I simply had to think about the inheritance of the property. First apply the larger time value to the object itself, then over-ride it with a very short value on both the :hover and :focus states. Which gives us code that looks a bit like this:

Working Example

This also code for the beta versions of Firefox and Opera.


#anim_box {
	background: #eee;
	border: 2px solid #aaa;
	width: 300px;
	height: 300px;
	-moz-transition-property: background-color, border-color;
	-moz-transition-duration: 2s;
	-webkit-transition-property: background-color, border-color;
	-webkit-transition-duration: 2s;
	-o-transition-property: background-color, border-color;
	-o-transition-duration: 2s;
	-transition-property: background-color, border-color;
	transition-duration: 2s;
}
#anim_box:hover, #anim_box:focus {
	background: #0f0;
	border-color: #f00;
	-moz-transition-duration: .1s;
	-webkit-transition-duration: .1s;
	-o-transition-duration: .1s;
	transition-duration: .1s;
}

I’ve created a very basic demo that you can look at here. In the example, I added attributes that works in the beta versions of Firefox and Opera.

Final Thoughts

Although this is still bleeding-edge stuff that won’t be seen on as nearly as many devices than if you had just created it in JavaScript, it does lend itself to some interesting experimentation without the need for JS. This type of programming can possibly streamline your work in the future, so that you end up letting JS do the heavy-lifting, with things like DOM manipulation, text replacement, AJAX calls, etc.

Although I won’t be using code like this on the types of professional work that I do (except in one case, which involves an Adobe AIR application), I’m certainly open to using it on personal projects.


comments powered by Disqus