Quantcast

CSS3 Transitions with JavaScript

Transitions are one of the most exciting and powerful features of CSS3 and when used in conjunction with JavaScript, the simplicity and power of these transitions can be considerably increased. CSS pseudo-classes and media queries 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 following HTML code is to start with:

So we have a box with a class of “box”, and a button. Let’s add the following jQuery:

This uses jQuery’s .toggleClass method to add or remove the specified class name. So let’s add the CSS:

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. So basically when CSS3 is used in conjunction with JavaScript, it considerably enhances the ease of programming and the power of animations.

Looking for a quality hosting service? here are a few I suggest.
BlueHost | HostGator | Media Temple
Admin
Admin
Ali has been an entrepreneur in web, video and related technologies. Having worked with many business across the globe, Ali stands truly a great pillar in the business working with him.