Triggering CSS3 Transitions With JavaScript

At the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS.

That alone should help you see how these types of simple animations work. But let’s take this a bit further.

CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. So naturally, CSS3 transitions can also be fired using any JavaScript event. Let’s try a simple click event that toggles a class name.

The transitions are declared on the .box element (using all the necessary vendor prefixes), and they include the use of multiple transitions separated by a comma (in this case transitioning both width and height).

So when the button is clicked, after the .box-change class is added, this will trigger the transition.

It’s very similar to what you’d normally do with :hover, or :checked, or media queries, or whatever. But in this case the solution involves JavaScript. Here’s a demo page that shows this simple technique:

Why Would You Do This?

Well, there could be a number of reasons. Maybe you’re using JavaScript in your web page or web app to trigger something, so instead of using jQuery to animate CSS properties, you can leave the simple animations in your CSS, and avoid having those cluttering your scripting. Of course, some people feel animation belongs in JavaScript, not CSS. But for simple animations, I’m starting to agree with what seems to be the majority view — that CSS is the right place for these.

So with this code, you’re using Modernizr to detect whether the browser supports transtions, then only trigger them if they are present.

For Simple Animations

If you’re using more complex animations, then you might have to use keyframe-based animations combined with scripting. But for simple fades and slides, you might be able to use JavaScript combined with CSS3 transitions and fork some jQuery for browsers that don’t support them.

37 Responses

I’m just gonna say: this is how I think it should be done. If the transition/animation is triggered by an event (like “click” in this article) that part should be handled by JavaScript and the transition/animation should be handled by CSS. Not everything works out that cleanly all the time, but I think that’s the proper separation of concerns.

Can you explain why? IE still doesn’t support CSS3 transistions, and FF just supported them. Why not use a JS library that can add support cross-browser. One type of function, for one type of language, cross-browser. Am I mistaken?

or you could use a plugin that decides for you if the browser can handle CSS3 animations or not.
I have made an example here: http://jsfiddle.net/meo/WsR5s/ i think its more efficient then writing twice the same animation.

It doesn’t matter whether or not it’s “needed” in these particular examples. I could have easily just used pure JavaScript to add/remove the class names. But the fact is, most people building websites nowadays are going to be using a JS library for something. Thus, if they get to a point where they need something simple like this, it will be much less code to use jQuery (or whatever library they’re using; I think my audience prefers jQuery).

In my opinion, raw JavaScript is not really much of an option any more unless you don’t know the syntax for the library and just find it easier to use raw JS.

I’m just getting into animating things using CSS (rather than jquery like I usually do). I’m trying to rebuild a simple animation (divs changing size/position etc) that I have working in jquery, into CSS. First immediate problem is that my jquery version used the height of the window (window.innerHeight) to calculate positions. How could I get round this with CSS? Is that possible?

The code snippets used in this page have a way of stylized display which is seen in many sites, including Mozilla Developer’s Network and Dreamincode. Is there an open-source css template available for this style?

Ok ok, I got it, I downloaded the newer version, that’s why the alternate banding wasn’t there. Strange, that is an excellent feature, dunno why the creator disabled it in the later version. But how should I use in my HTML page to generate the style, like enclosing the code section within [code] tags or what?

Thanks a lot. And I noticed t now, the style of nesting comments on this page is cool. But don’t you think that if the level of replying propagates to 4 or 5 layers deep, the last answer will have a very small width to display its contents, to the point that it might be visually ugly?

Hmmm, your previous posts had a reply option at the bottom, your last post didn’t. May be the nesting indeed stops after 3 or 4 levels (it will be seen once this message is posted!), but then, the consistency is broken. Have you designed the site yourself, or are you using some other tool?

Yep, that’s how it works. That’s built into WordPress, and I have the option to choose how many levels deep.

You can still reply to my last message above by hitting the nearest reply button in that section. It’s not too bad. Some people choose a shorter nesting, which I probably should do too, but this way it’s more definite what is being replied to what.

And the nice rounded corners on all the posts (presumably using border-radius, with proprietary prefixes) work fine in Firefox, but won’t work in IE. You can use the resource at http://www.curvycorners.net to have the same effect.

Most important for me about CSS transitions is possibility for hardware acceleration and frame-skipping. This means lower-powered devices can saw off the frames, and or jump to the very end of the animation instantly.

Now there is animation timer in JavaScript, but still the browser/device can in theory be optimized to work faster for specific CSS transitions. And older crappy browsers simply don’t support transitions which is perfectly fine, they couldn’t deal with opacity changes anyway.

I wish there were better API to trigger CSS transitions using JavaScript though.

Hi everyone.I find your tutorials very very useful.Well,i tried to create the effect from apple site from the searchfield but i stuck when i need to switch the transition effect from right to left in exchange for the normal effect left-right.What should i do?I guess it’s about some kind of script right?I’ve already use it onfocus in order to resize the li-size from menu.I need some help with this.Thanks in advance!

Andrey, you’re going to have to provide a better explanation of what you’re referring to. I don’t know what you’re trying to transition, and which part you’re having trouble with. The “li’? The search field? And if you can provide a link to a demo, that would be good.

This works great! I have been playing around with using just CSS, pure JavaScript and jQuery but of all the tests and examples tried nothing works a elegantly as your code Louis. Thank you so much for sharing this, this really has made my day.

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.