Media Temple Hosting

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:

a, a:link, a:visited {
	color: lightblue;
	-webkit-transition: color .4s linear;
	-moz-transition: color .4s linear;
	-o-transition: color .4s linear;
	-ms-transition: color .4s linear;
	transition: color .4s linear;
}

a:hover {
	color: white;
}

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:

.box {
	width: 300px;
	height: 300px;
	background: #222;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	-ms-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

.box:active {
	width: 500px;
	height: 500px;
}

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:

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:

input, textarea {
	width: 280px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

input:focus, textarea:focus {
	width: 340px;
}

And here’s a live 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:

input[type="checkbox"]:checked {
	height: 20px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

input[type="checkbox"]:checked {
	width: 30px;
}

And here’s a simple 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:

input[type="text"], textarea {
	background: #e2e2e2;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}

input:disabled, textarea:disabled {
	background: #666666;
}

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

$(function() {
	$('input[type="radio"]').click(function() {
		if ($(':checked').val() === "other") {
			$('input[type="text"]').removeAttr("disabled");
		} else {
			$('input[type="text"]').attr("disabled", "disabled");
		}
	});
});

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:

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:

.box {
	width: 440px;
	height: 440px;
	background: #222;
	margin: 0 auto;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	-ms-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

@media only screen and (max-width : 960px) {
	.box {
		width: 300px;
		height: 300px;
	}
}

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:

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.

Are There Other Ways?

This is pretty much all I could come up with for alternate ways to use CSS3 transitions. If you can think of another, let me know.

53 Responses

  1. Very good article. However it does not solve a similar problem I’ve got. I want to trigger a transition on load.

    See this URL: http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load

    • You can’t do that without JavaScript, and if you tried to use a delay or something, then it’s just going to confuse people, or else not even work correctly.

      Just use JavaScript. There’s no reason you shouldn’t be able to just use JavaScript for this; this is what JavaScript is for. CSS is not really made for that purpose.

    • Ammon Casey:

      you could do this by targeting a class that is added on load

      
      /* javascript */
      $(document).ready(function() {
          setTimeout(function(){
            $('html').addClass("loaded");
          }, delay);
      });
      
      
      /* css */
      .box {  
          width: 300px;  
          height: 300px;  
          background: #222;  
          -webkit-transition: width 2s ease, height 2s ease;  
          -moz-transition: width 2s ease, height 2s ease;  
          -o-transition: width 2s ease, height 2s ease;  
          -ms-transition: width 2s ease, height 2s ease;  
          transition: width 2s ease, height 2s ease;  
      }  
        
      .loaded .box {  
          width: 500px;  
          height: 500px;  
      }
      
      • Yeah, I was about to offer the same solution, but then realized he was asking to do this without JavaScript. But yes, this would definitely work.

        I don’t think you need the setTimeout function though. I think you can just use jQuery’s (document).ready. or else use the raw JavaScript onload event which actually waits a little bit longer than (document).ready, because (if I remember correctly), (document).ready doesn’t wait for images and external files to load, it only waits for the DOM to be built. (I might be oversimplifying this, just going from memory.)

        • Ammon Casey:

          yeah, I just use the setTimeout so that I can control the delay. This lets me make sure assets are downloaded before I fade them in or something like that.

          • If you want images to be loaded too, just use window.onload and don’t “abuse” setTimeout, dude ;)

    • Jacob Dubail:

      Use a body:hover .target_class to make the magic happen.

    • Divyam:

      I guess you can do so with CSS3 Animations to do so. You can run the animation once to get the desired result. You can also set a delay if you want.

  2. Your :focus, :checked and :disabled examples are simple but awesome. Will implement some of these tomorrow! :)

  3. Cool ideas, I love transitions. Tend to use the ease in and out quite a bit

    Tom

  4. Great tutorial guy. This will help me, thanks

  5. You can also trigger transition just by adding a class (or setting the style attribute). You have the jQuery script for adding disabled, so just thought I’d mention there’s an easier way if you don’t want to use disabled (or want it on non-form elements)

  6. Great Post. Congratulations you have a really useful website :)

  7. Very nice article, I especially like the transition using media queries, it is very clean and elegant. Would you recommend it on a whole website that uses responsive layout and media queries to adapt to the screen size, or do you think it would be disturbing for the average user ? I know plenty of user who resize browser to fit there needs (if they’ve got a msn window open for example, etc). Of course they don’t resize as often as webdevelopers but it would be a nice eyecandy for those who do.
    I’m also wondering if those media query transition would work on ipad for instance when you change orientation? It could create a nice effect. I would do the test but I’ve no iPad.

  8. Dave Methvin:

    Some great ideas here! On the checkbox one, the labels should really be in <label> tags so they become part of the click target. And the fact that the checkbox moves as part of the animation is probably not a good idea. Maybe something like this?

    http://jsfiddle.net/dmethvin/sRqG5/

    • Definitely, good points. I was a little worried about the checkbox thing being a little too weird, but mine was more of a proof-of-concept.

    • That’s exactly what I intended to suggest Dave :-) Maybe with the + instead of ~ combinator.

      Anyway, just note that IE7 has problems with <img> tags inside <label>s, apart from not understanding those combinators.

  9. These transitions are simply great. Although I do not have great understanding on CSS3, but your demos and examples made them easier to understand.

  10. Nice examples. Especially for touch-based devices the named pseudo-classes are even more suitable, because of the lack of the hover functionality there.

  11. Bookmarked. Great Article! Thanks for that.

  12. awesome tips. thanks for sharing.

  13. The :target pseudo-class should also trigger a transition. And should make some nice effects possible. (I haven’t tried this).

  14. Nice article. One year ago I build CSS3 Framework that uses Active, Hover and Target principles http://code.google.com/p/css3-action-framework/

  15. Jason:

    Transitions does work with some of the html5 forms validation psuedo-classes.

    You can have a transition from :invalid to :valid

  16. Transition with media queries works on smartphone Android (dolphin) after loading page, not after refresh, but it’s really cool

  17. Brilliant article :)

    Totally love it.

    I didn’t know most of these tricks :D

  18. The problem with using :active to mimic a mousedown state is that you can click on a link, hold, then move your mouse off and the anchor will remain stuck in that state. Use with care!

  19. Beautiful article! Really Interesting! Thank you so much!

  20. Alex:

    Nice article. Some of these transitions are entirely new to me.

  21. Hallo,
    wow thats realy cool. the Transitions Using Media Queries is the best. Thank you so much. Greetings from Germany.

  22. To write CSS manually is not tough, if you know the properties you can easily write CSS. But what if you are too lazy to write your own code then there are lots of ways that may help you do it. Writing CSS3 codes are actually for patient people most especially but if you are done with doing it manually Im pretty sure you will be more than glad of seeing the results.

  23. Mark:

    Great stuff. It’s nice to see some one do something different with CSS animations. I love the subtle movement too. Thanks.

  24. Ana:

    Maybe this should have been pretty obvious from the beginning, but here is something I noticed while playing with transitions + media queries and going from fixed to fluid (or from fluid to fixed) width: transition is from the fixed width to 0 (or from 0 to the fixed width) unless a min-width is specified.

  25. I used your trick on one of my client’s website. Looks perfect and I was told that visitors also like it very much, see yourself on this page -> http://pevex.com.cy/cyprus_company_formation.html and try to hover on the table which describes advantages…

  26. Shaf Syed:

    The transitions using :active seems like what I am looking for exactly. BUT with the divs floated side by side. Can you please email me the code for the exact solution if you have time? I would really appreciate it. Let me try to explain:

    Basically I am looking for the onMouseOut for the left and right divs to go back to its original width such as 50%. So the onMouseOver on either the left or right div will expand it to 80% while the opposite side decreasing to 20% This would work the same if for the other side too. When the user mouses over the right side which is currently at 20% the right div would expand to 800% and the opposite div will be at 20%. This transition happens simultaneously and is smooth. AND I am only coding for IE 9+, Safari, Chrome, Firefox.

  27. The transition effects in css3 are really great at least they eliminate the use of those complicated jquery plug ins. Great article… thanks.

  28. Finally something good and descriptive. I’m playing with CSS about half year and believe it or not, it’s the first time I see that :checked selector. Good article, great blog, already bookmarked :)

  29. Analí:

    Hi!
    Thank you, your post has very interesting examples.
    I appeal to your expertise, because I wonder: Do you know how to do the effect done in the main text in this website? http://www.buildacity.org/
    In every movement of the mouse, the font color changes, looks really cool.

  30. Vinay:

    Superb and different article compared to rest of the css3 transitions mate!!

  31. Chris McLaughlin:

    Hi Louis,

    Great examples. I did try the “active” example on iPad running iOS7 and iPhone 5 running iOS6 and it did not work. Perhaps you have discovered a solution since the article was published. If so, I would be very happy to learn it.

    Best,

    C.S.

  32. I found the tutorial useful and used some of these transitions on my own websites. Thanks a lot.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.