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;
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, thus use CSS transitions without hover. This is done 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;
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;
transition: width 1s ease;
}
input:focus, textarea:focus {
width: 340px;
}
And here’s a live demo:
So that’s one way to do a CSS transitions without hover.
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;
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;
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;
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:
Final Thoughts on Transitions Without Hover
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.
This is pretty much all I could come up with for alternate ways to use CSS3 transitions. If you can think of another way to use transitions without hover, let me know in the comments.
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.
Hi,I want the web page opens automatically. Of course, without mouse(active,hover,…).Please help me.
you’re flat out wrong….they can be done without js
http://codepen.io/chrissp26/full/szoyk
There’s nothing happening in that demo “on load”. You’re just doing an animation with CSS and it just so happens that it coincides with when the rest of the content is displayed. In a real website, there’s no guarantee that this will occur after the whole page has loaded. For example, what if there’s an image that takes 5s to load? Will the animation wait for that image? No, it will load as soon as the browser reads it, which is not really what was asked here, or in the Stack Overflow thread.
you could do this by targeting a class that is added on load
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
setTimeoutfunction though. I think you can just use jQuery’s(document).ready. or else use the raw JavaScriptonloadevent which actually waits a little bit longer than(document).ready, because (if I remember correctly),(document).readydoesn’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.)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 ;)
Use a body:hover .target_class to make the magic happen.
Can yuo give an example of this? I’m intrigued…
+1 for an example!
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.
you can’t do it with “transition” but you can use “animation”!
@keyframes example{ from {width:10px; height:10px; } to{width:20px; height:20px; } } .myDiv{ animation: example 2s; } It is the easy way,without javascript code! good luckYour :focus, :checked and :disabled examples are simple but awesome. Will implement some of these tomorrow! :)
Cool ideas, I love transitions. Tend to use the ease in and out quite a bit
Tom
Great tutorial guy. This will help me, thanks
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)
Great Post. Congratulations you have a really useful website :)
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.
That’s a good point, yes, I believe that would work just fine on an iPad, or even an iPhone for that matter.
I think as long as you keep the transitions fairly simple, there’s nothing wrong with including them for elements that change shape/size/position when the screen is changed. Again, very few people will actually notice them, but I don’t think they would be disturbing at all to any users.
Hi,
Just tried it out on my iPad and iPhone and it works great. Here is a simple example
http://www.pedalo.co.uk/fb/test/mediaQtransitions.html
Oh, maybe I should mention that you need to rotate your device to see the effect.
Thank you for the ipad testing, great to know it works when you change rotation.
I want to do Rollover on image same place iframe’s HTML5 banner load, How to do that please help
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.These transitions are simply great. Although I do not have great understanding on CSS3, but your demos and examples made them easier to understand.
Nice examples. Especially for touch-based devices the named pseudo-classes are even more suitable, because of the lack of the hover functionality there.
Bookmarked. Great Article! Thanks for that.
awesome tips. thanks for sharing.
The :target pseudo-class should also trigger a transition. And should make some nice effects possible. (I haven’t tried this).
I have used this on a site to slide in a form with :target and css transition works really good :)
Nice article. One year ago I build CSS3 Framework that uses Active, Hover and Target principles http://code.google.com/p/css3-action-framework/
Transitions does work with some of the html5 forms validation psuedo-classes.
You can have a transition from :invalid to :valid
Transition with media queries works on smartphone Android (dolphin) after loading page, not after refresh, but it’s really cool
Brilliant article :)
Totally love it.
I didn’t know most of these tricks :D
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!
Beautiful article! Really Interesting! Thank you so much!
Nice article. Some of these transitions are entirely new to me.
Hallo,
wow thats realy cool. the Transitions Using Media Queries is the best. Thank you so much. Greetings from Germany.
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.
Great stuff. It’s nice to see some one do something different with CSS animations. I love the subtle movement too. Thanks.
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-widthis specified.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…
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.
The transition effects in css3 are really great at least they eliminate the use of those complicated jquery plug ins. Great article… thanks.
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 :)
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.
That’s pretty neat. Probably not very practical and kind of distracting, but interesting.
They are doing that with JavaScript, not with CSS. I can’t think of a way to do that with CSS. Look at their JavaScript:
http://www.buildacity.org/js/script.js
Do a search for the words “crazy colors” and you’ll see the script that does that.
Thank you so much, I’ll check it out. Have a nice day ;)
very good explain i will try it and update you if i have a problem
Superb and different article compared to rest of the css3 transitions mate!!
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.
Quick search brought this up:
http://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/
I’m not sure if it works but worth a try I guess.
I found the tutorial useful and used some of these transitions on my own websites. Thanks a lot.
Hi,
It could be with :target function like this:
These transitions are very dynamic and beautiful! I especially like the :active one, thanks for this post.
Hey there. Thank you for this amazing tutorial. I tried some of the things that you explained and it helped me alot, especially with the :active command.
Wow! Nice work man.I adore animations and transitions. I will try some of these in my future projects.
very nice article but i want to know how to increase height of div from 0px to 50px on page load automatically in transitio property.
Well, you can’t do it on page load. You can use an animation/transition delay to mimic that, but you can’t test page load with CSS.
Instead, do something like with JavaScript:
This will add the class “transition-stuff”, on which you have the transitions defined, so they will only trigger on page load. Or use
addEventListenerto do the same thing, which might be better.It’s a Brilliant post. I really like your article. This article was helpful. Thanks for sharing your concept.
Great job! I’m really impressed with the animations and transitions you’ve done. I can’t wait to incorporate some of these into my next click project.