JavaScript and CSS3 transition fun

Today I found myself messing around with CSS3 transitions in order to animate some objects on the DOM. Transitions give you some powerful tools for animating content via CSS properties. Now, we actually have several ways of moving things in HTML5 land: transitions, animations, and canvas.

The latter, canvas, is a bit more involved for moving items. Its much more well suited for heavy animations. You know, games, moving sprites, bitmapping and using lots of low-level code to manage and manipulate it all. Using canvas has some incredible possibilities with modern browsers though. Check these out for some awesome examples: http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

Animations work via CSS properties and remind me of old fashioned animators and their keyframes. Separate topic for you readers out there in another post…maybe! Some major differences include the fact that animations can be repeated as well as have directional changes.

Transitions! Lets talk about transitions then. These cool cats are pretty darn swell. Easy to use and even make use of that fancy GPU of yours. How easy are they to use? Simply set them up and let the browser do the tweening so to speak.

That’s the generic non-vendor specific setup. You can transition oodles of properties, for example, the opacity property. The duration and delay of the transition setup should be clear. What’s a timing function? Can we say ‘easing?’ Yes, easing functions. Remember your basic Calculus class? These are AKA position functions! Where the first and second derivatives are velocity and acceleration functions respectively. Right, umm, whatever you say DK! Yeah, so these functions in short depict the ‘movement’ or position of the transitional property. They can be one of: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier

Here we have a setup telling the browser to transition the opacity property from old value to new value for a 0.5 second interval by easing into it and by waiting 0.1 second.

What do you mean by ‘from old value to new value?’ That is, how to kick this party off? Use the CSS properties Luke! In short, you would set the starting value, eg the ‘old value’, in the CSS class where the transition is defined. You would then either introduce a second class or psuedo-selector with the new value. Of course JavaScript can be used to set the new value as well.

In this example hovering your mouse over the element with id of myDiv will result in a fade out after a short delay.

“Can I transition multiple properties at once?” you ask? Why sure! You can expressly list the properties you want to transition, giving each the same or independent transition data. We do this by using a long-hand notation like so here. Also, we could use the ‘all’ property to animate any property we choose in the same way.

Now, to use this in JavaScript, we can simply add the class to the element. Note that we used a class selector this time around, though its not necessary, just mixing it up a bit.

Hey! We just roped JavaScript into this game!
Alternatively we can use JavaScript to tweak the properties at will and leave the second CSS class out of it

While we are speaking JavaScript, lets see how we could setup the transitions in JavaScript! Not hard at all really and yes, we can use ‘ms’ too.

Now that we got that all covered, how about some live examples, eh?
For the first example, I have some code demnstrating creation of HTML elements in JavaScript along with some CSS and the afore mentioned transitions. We also see two ways to set style info on a element.

Example One

After putting that together, I thought I’d lay out the ‘cards’ in rows and animate them. Looking at the code, you might at first think that each card would animate one at a time. In fact they animate in unison since the code loop is indeed short and real fast, it essential is the same as setting the new locations all at once.

Example Two

After seeing this, I wanted to see how to make one card fly at a time. To implement this I made use of setTimeout(). I probably could have used some fancy closure there, but readability is far more important then fancy code tricks in my book. Thus with the setTimeout() use I basically delay the property setting code a wee bit for each element, hence achieving the affect I wanted.

Example Three

While looking at doing this it occurred to me that we could also have listened in for the transition complete event thrown by the browser. This would look similar to the below code piece. I found this was firing for each property though, so might need a wee bit of work to get things well-defined for your use case. Also note, guess what, yup, vendor prefixes exist for this cat.

What properties can you animate in this fashion? Quite a few actually, but not everything. Here is a list from the W3C. Of course some vendors will opt to add more pain and torture to us mere developers….sigh.

http://www.w3.org/TR/css3-transitions/#properties-from-css-

Speaking of vendors! All the CSS above was using the generic property name. You may wish to add the vendor specific prefixes as needed. They are like so below.

Ok folks, hope you enjoyed this little bit. Remember, be responsible! If you catch yourself thinking of introducing blinking text, 30 lashings to you!

Cheers!

This entry was posted in CSS3, HTML5, Techy. Bookmark the permalink.