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 3:  Watch it Grow!!

Open template.html one more time and this time, save the document as scale.html.  Click on the box to select it and open the Advanced CSS Animator.  On the CSS tab, go to Advanced CSS Properties and dropdown the CSS Transforms group.  Select "ScaleX" and the right arrow to move it to the Used Properties box.  Again, you have the same From and To box and this time, you will put 1 in the From box and 2 in the To box in order to get it to scale the width to twice its size.   Now we want to add another transform so this time, select "ScaleY" and the right arrow to move it to the Used Properties box.  Again, you have the same From and To box and this time, you will put 1 in the From box and 2 in the To box in order to get it to scale the height by the same amount.  

Applying the Scale properties to scale the box to twice its size

Specify what you want for the Easing property and the Duration and click OK.   Back in the Tag Inspector, choose the Event to trigger the animation.  I used onMouseOver, but you could use onClick or whatever you like.  Check the result in Live View or in your browser.  Very nice, but the results of this transition dictate even more the necessity of having a way to get back to the initial state, so select the box one more time and open the Advanced CSS Animator again and choose CSS/Advanced CSS Properties/CSS Transforms and choose Scale X and Scale Y as we did before.  This time, select 2 in the From box and 1 in the To box and select the Easing and Duration values you wish to use.  Click OK and select the inverse trigger event in the Tag Inspector (onMouseOut if you used onMouseOver the first time, etc).  Try Live view or your browser to see what happens.  Depending on the event you used, you should have the box and its contents grow to twice the size when the mouse is over the box (or the box is clicked) and it should revert to its original size and position when the mouse is off the box. 

What Now?

Obviously, there is a lot more you can do with the CSS Animator than I can show you in one article.  This time, you have learned the basics of the Advanced CSS Animator.  I am very impressed with how easy and how quick it is to produce some pretty cool effects on your web pages.  I can't imagine how anyone moving into CSS3 wouldn't want this in their extension arsenal because not only can you quickly produce CSS3 effects, but you have the assurance of cross browser compatibility thanks to the DMXzone's clever use of JavaScript to help out the older browsers.  Attached to this article is a zip file with the sample pages used in the examples.  Take a look at them in your favorite browser (or Internet Explorer) and see for yourself how you can have CSS3 effects in the browsers of today with the DMXzone Advanced CSS Animator!

In my next article, I'll show you how to use the Advanced CSS Animator in your every day work, whether you design for Fortune 500 corporations or make children's games.  Until then, take a look at some more examples of this magnificent tool and get a copy so you can make some cool stuff all your own!

Check out some cool demo's at:

http://www.dmxzone.com/demo/dmxAnimator/effects/popup.html

http://www.dmxzone.com/demo/dmxAnimator/effects/dropin.html

http://www.dmxzone.com/demo/dmxAnimator/effects/zoom.html

http://www.dmxzone.com/demo/dmxAnimator/effects/fadein.html

http://www.dmxzone.com/demo/dmxAnimator/effects/slide_out_menu.html

http://www.dmxzone.com/demo/dmxAnimator/effects/rainbow.html

http://www.dmxzone.com/demo/dmxAnimator/effects/splash.html

http://www.dmxzone.com/demo/dmxAnimator/sideSlideMenu/demo-test.html