Getting started with the Advanced CSS Animator

In this article, Nancy will introduce you to the DMXzone’s latest extension, the Advanced CSS Animator.  She will introduce you to the extension and take you through 3 very simple examples of how you can use it to create some wonderful CSS Animation.  And, unlike CSS animation that only works in a few browsers, the Advanced CSS Animator has seamlessly integrated jQuery functions so they work in all major browsers.

Example 2:  Background Changes

Let's go back to the template.html document and save another document with our basic box in it.  This time, instead of moving the box, let's change the way it looks.  Select the box and open the Advanced CSS Animator.  Currently we have a white box with a red border.  This isn't very exciting so let's make the box change to blue-green when we mouse over the box.  To do that, select the box and open the Advanced CSS Animator.  The behavior we want is found on the CSS tab in the Advanced CSS Properties menu and the colors submenu.  Click on background-color and click the right arrow to move it to the Used Properties dialogue box.

The Advanced CSS Animator interface with background-color selected.

We already have a white box on the page so our From color will be white which can be easily selected with the color picker next to the From: input box.  We want to change it to a greenish blue, so I have selected the swatch that matches #009999 as the To: color.  This time I want a linear transition, so I will select linear from the Easing dropdown (it's right above the default swing) and click okay.  If I wanted to transition slower, I could change the Duration to 2000, for example.  If I wanted a very quick transition, I might change the Duration to 300.  But we'll leave it at the default 1000 or 1 second for this example.  Click OK.

The input boxes with our colors selected.

In the Tag Inspector, we need to remember to set the event from the default onFocus to a mouse event so we can see this happening.  I have selected onMouseOver and indeed when I check the transition in Live View (or in a browser), the background of the box changes when the mouse is over it.  Again, this is okay, but it would be better if it could change back when the mouse is removed, right?  Easy to do; just select the box again, select the Advanced CSS Animator from the Behaviors panel and repeat the steps for the transition, but this time, the From color is #009999 and the To color is #FFFFFF or white.  I left the easing as linear and the default Duration of 1000.  Click OK and set the Event to OnMouseOut in the Tag Inspector so the color now changes to green-blue when the mouse is over the box and back to white when the mouse is removed.

Now view your document in Live View.  Click on the box and it will change to the greenish blue color.  Take your mouse off the box and it will change back to white.  See how that works?  Are you getting the idea?  Let's try one more.  This time, we're going to make the box bigger when we click on it.  Ready?