CSS3 Transitions Without Using :hover

Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.
Here’s a typical transition that changes link color on mouseover using pure CSS:

view plain?

1. a, a:link, a:visited {  
2.     color: lightblue;  
3.     -webkit-transition: color .4s linear;  
4.     -moz-transition: color .4s linear;  
5.     -o-transition: color .4s linear;  
6.     -ms-transition: color .4s linear;  
7.     transition: color .4s linear;  
8. }  
9.   
10. a:hover {  
11.     color: white;  
12. }  

This will animate the color property when you hover over a link on the page. Pretty simple, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.
You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined below. I’ve also included a demo for each example.

Transitions Using :active

The :active pseudo-class matches any element that’s in the process of being activated. The primary way that an element is “activated” is by means of a mouse click, or mouse down.
Here’s some CSS and an accompanying demo that demonstrates using :active along with CSS3 transitions to mimic a mousedown event:

view plain?

1. .box {  
2.     width: 300px;  
3.     height: 300px;  
4.     background: #222;  
5.     -webkit-transition: width 2s ease, height 2s ease;  
6.     -moz-transition: width 2s ease, height 2s ease;  
7.     -o-transition: width 2s ease, height 2s ease;  
8.     -ms-transition: width 2s ease, height 2s ease;  
9.     transition: width 2s ease, height 2s ease;  
10. }  
11.   
12. .box:active {  
13.     width: 500px;  
14.     height: 500px;  
15. }  

With this code, the box’s width and height properties are animated to become larger as you hold the mouse down on the element. Once you release, the box animates back to its original dimensions.
Here’s a demo:

• View Demo

Transitions Using :focus

You can use the :focus pseudo-class to do something similar. This time we’ll use a form, and we’ll animate the width of any form element that receives focus:

view plain?

1. input, textarea {  
2.     width: 280px;  
3.     -webkit-transition: width 1s ease;  
4.     -moz-transition: width 1s ease;  
5.     -o-transition: width 1s ease;  
6.     -ms-transition: width 1s ease;  
7.     transition: width 1s ease;  
8. }  
9.   
10. input:focus, textarea:focus {  
11.     width: 340px;  
12. }  

And here’s a live demo:

• View Demo

Transitions Using :checked

You can animate checkboxes and radio buttons when they become “checked” — although you’re limited with what you can do with those, since you can’t really change their native styling.
We’ll just do a simple width change, which will appear to indent any selected checkbox:

view plain?

1. input[type="checkbox"]:checked {  
2.     height: 20px;  
3.     -webkit-transition: width 1s ease;  
4.     -moz-transition: width 1s ease;  
5.     -o-transition: width 1s ease;  
6.     -ms-transition: width 1s ease;  
7.     transition: width 1s ease;  
8. }  
9.   
10. input[type="checkbox"]:checked {  
11.     width: 30px;  
12. }  

And here’s a simple demo:

• View Demo

Transitions Using :disabled

Keeping with the theme of web forms, this time we’ll combine CSS3 transitions with some jQuery to animate the background color of form elements when they become disabled via the disabled attribute:

view plain?

1. input[type="text"], textarea {  
2.     background: #e2e2e2;  
3.     -webkit-transition: background 1s ease;  
4.     -moz-transition: background 1s ease;  
5.     -o-transition: background 1s ease;  
6.     -ms-transition: background 1s ease;  
7.     transition: background 1s ease;  
8. }  
9.   
10. input:disabled, textarea:disabled {  
11.     background: #666666;  
12. }  

And the quick-and-dirty jQuery that adds/removes the disabled attribute is:

view plain?

1. $(function() {  
2.     $('input[type="radio"]').click(function() {  
3.         if ($(':checked').val() === "other") {  
4.             $('input[type="text"]').removeAttr("disabled");  
5.         } else {  
6.             $('input[type="text"]').attr("disabled", "disabled");  
7.         }  
8.     });  
9. });  

So when the last radio button is selected (the one with a value of “other”), the text box has its disabled attribute removed. If another option is selected, the disabled attribute is re-applied.
The :disabled pseudo-class is dependent on that attribute being present, so the animation will occur whenever that attribute is added or removed.
Here’s the demo:

• View Demo

Transitions Using Media Queries

This last one may be the least practical, because let’s face it, the only people that ever resize their window to see what happens are web developers.
Nonetheless, this is just another way to use CSS3 transitions. The new Modernizr design does this.
Here’s the code:

view plain?

1. .box {  
2.     width: 440px;  
3.     height: 440px;  
4.     background: #222;  
5.     margin: 0 auto;  
6.     -webkit-transition: width 2s ease, height 2s ease;  
7.     -moz-transition: width 2s ease, height 2s ease;  
8.     -o-transition: width 2s ease, height 2s ease;  
9.     -ms-transition: width 2s ease, height 2s ease;  
10.     transition: width 2s ease, height 2s ease;  
11. }  
12.   
13. @media only screen and (max-width : 960px) {  
14.     .box {  
15.         width: 300px;  
16.         height: 300px;  
17.     }  
18. }  

This example animates two different properties simultaneously, separating the two by a comma. The media query tells the box to shrink if the screen size goes below 961px.
Resize your window in the demo page to see it work:

• View Demo

Some Notes About the Code

If you’re wondering about the code, I’ve included the standard property last, even though it’s not supported by any browser that I know of.
Also, I’ve included the -ms- prefix, even though IE9 and IE10 do not yet support transitions. But evidently they are coming in IE10, so it’s worth including an extra line.
And the code examples that you can see in this post aren’t exactly the same as those used in the demo pages. I’ve made the code as brief as possible for the purpose of focusing only on the parts being discussed in this article.