Back to Top
The nuts and bolts for
Creative web development

Advanced CSS Animator

“Next Generation CSS based, Flash-less, Web Animations!”

Need full power and control of your CSS based animations? Awesome effects combined all together? Full Cross browser support and no Flash at all? The Advanced CSS Animator is the answer to your prayers!

With the Advanced CSS Animator you can animate virtually any CSS Property! Borders, colors, font sizes, position, opacity, apply CSS Transformations like rotate, skew, zoom and more! Use the supplied presets to choose from ready animations like fade in/out, expand, collapse, position in browser, paper spin, shake, blink or save your own CSS animations in a new preset!

Need more then one animation – well add as many as you wish! Those will be nicely added to the animation queue. You can run animations simultaneously, apply timing and easing and have a precise control of the animations queue! 

Overview

Features Highlights:

  • Pure CSS Based Animation – No Flash required!
  • Any CSS Property animation - You can animate all CSS Properties like colors, fonts, sizes, position and more!
  • Full Visual Transformation – When you animate an object it will visually transform from the old to the new state in the given duration! So it will grow or shrink, rotate or move whatever animation is chosen!
  • Apply great effects and easing – you can achieve fantastic speed effects, bouncing and elastic movements by giving an effect duration and choosing the easing you want. 
  • Animate Multiple Elements - animations are fully CSS Selector based, so you can choose to animate one or more objects by just giving the right CSS Selector.
  • Use CSS Transitions – with CSS transitions you can finally move and/or transform any element as you wish! All cross browser! If some of the CSS Transitions properties are not supported on your browser they will be emulated so you still achieve the same great effect!
  • Make quick easy animations out of the box - Select from the many presets we have include or save your own animations as new preset!
  • Custom Presets – Produce some great CSS3 effects for your site in no time.
  • NEW: Random Animations - Now you can make element come in from all random places, have random colors and much more!
* For complete Features overview press the Features in Detail 

Features

  • Pure CSS Based Animation – No Flash required! 

  • Any CSS Property animation - You can animate all CSS Properties like colors, fonts, sizes, position and more! 

  • Full Visual Transformation – When you animate an object it will visually transform from the old to the new state in the given duration! So it will grow or shrink, rotate or move whatever animation is chosen!
  • Apply great effects and easing – you can achieve fantastic speed effects, bouncing and elastic movements by giving an effect duration and choosing the easing you want. See the Easing diagrams.

  • Animate Multiple Elements - animations are fully CSS Selector based, so you can choose to animate one or more objects by just giving the right CSS Selector.
  • Use CSS Transitions – with CSS transitions you can finally move and/or transform any element as you wish! All cross browser! If some of the CSS Transitions properties are not supported on your browser they will be emulated so you still achieve the same great effect!

  • Make quick easy animations out of the box - Select from the many presets we have include or save your own animations as new preset!

  • Custom Presets – Produce some great CSS3 effects for your site in no time.

  • Full support for On Mouse Enter and On Mouse Leave events -  Sometimes, On Mouse Over and On Mouse Out events are not enough as they work bad on containers having children. Now we have extended Dreamweaver to offer you support the new special onMouseEnter and onMouseLeave events, so now you have full control when animations should start and stop!

  • Full animation queue support – run animations simultaneously or after each other! Stop previous animations if needed.

  • Time your animations – give you animations a duration and start delay if needed.
  • Customizable animation - Adjust the animation appearance by duration, easing, repeating and more…

  • Full CSS Reference included - now by just browsing the different CSS Properties shown in the Advanced CSS Animator, you can directly see explanation about them as context help! You can even read more for full explanation of the CSS Property and what it does.

  • Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you'll need.

  • Use jQuery as power engine – to achieve all those smoothing animations and CSS support we have used jQuery as industry based standard for building Web 2.0 sites.
  • Search Engine Friendly - as the Advanced CSS Animator is pure HTML and CSS code it can be nicely indexed by all search engines and web spiders.
  • Fully cross-browser compatible - Create stunning CSS3 effects even in Internet Explorer thanks to the DMXzone’s clever use of JavaScript.

Showcases


  • Task Management App Showcase

    In this task management app demo page you can create tasks, see what you need to do, track your progress and see what you've already done. The page has been created using DMXzone Boostrap and ...

  • Responsive Online Store Showcase

    For this showcase we used HTML5 Data Bindings and DMXzone Database Connector to connect to our database in order to retrieve the products and HTML5 Data Bindings SEO for the content to be searchable ...

  • Cupcake Bakery Showcase

    For this showcase we used HTML5 Data Bindings and DMXzone Database Connector PHP/ASP in order to connect to our database. We have placed a repeat and a detail regions containing the products. When ...

  • Tasks Management System

    For this interactive task management system we used a few DMXzone extensions in order to allow you to add tasks, assign them to different users, set priority levels and due dates. You can edit any of ...

  • Interactive Designer Collection Showcase

    For this showcase we used the extensions packed in the Interactive Designer Collection. The accommodation images and titles are retrieved from a data source with HTML5 Data Bindings. We added ...

  • Photographer Portfolio Showcase

    For this showcase we used the DMXzone Supersize extension for the beautiful image presentation and Advanced CSS Animator for the sliding out navigation on hover. We also animated the camera icon that ...

  • Cars Magazine Showcase

    For this showcase we used DMXzone Supersized for the beautiful background images, Ajax Datagrid for the car specs and Advanced CSS Animator for the sliding out panel that is triggered on mouse over.

  • Charter Yachts Showcase

    For this showcase we used DMXzone Bootstrap for the design layout and its Elements extension for the content details such as labels, buttons and text. The Advanced CSS Animator triggers a sliding out ...

  • Business Page Showcase

    For this showcase we used the Advanced CSS Animator to animate the different elements and navigation on the page for these stunning effects. Also the location is presented in a DMXzone Google Maps, ...

  • Grand Hotel Contact Showcase

    In this showcase we designed a simple but yet very effective and useful contact page. For the beautiful drop effects we used the Advanced CSS Animator and DMXzone Google Maps for the location.

  • Grand Hotel Showcase

    For this stunning hotel showcase we used the Advanced CSS Animator to create drop effect of the website sections on page load and also to animate the navigation menu buttons. Also the features images ...

  • Stunning Landing Page Design

    Today's showcase is an astonishing way of presenting your products or services with a simple, but stunning landing page. With the use of HTML 5 Video Player for background video and Advanced CSS ...

  • Mobile App Notify Showcase

    For this showcase we used the DMXzone Ajax Form where you can put your e-mail address and on submission a confirmation notification shows up (HTML5 Responsive Notify). They are binded through the ...

  • Jewelry Store Showcase

    For this showcase we customized the Sliding PayPal Shopping Cart design and buttons through the CSS to match the web site layout colors and custom buttons. We also animated the product images to ...

  • Metro Design Showcase

    For this showcase we used 4 awesome Dreamweaver extension in order to create a Metro design. It contains DMXzone Tabs with animated content (Advanced CSS Animator), which are customized with the ...

  • Greenland Showcase

    For this showcase we used our Advanced CSS Animator to animate various parts of our page. We have 3 pictures of clouds which are set on load to start moving from left to right using different delays ...

  • Animated Valentine's Card Showcase

    For this showcase we used the improved Advanced CSS Animator in order to create a gorgeous Valentine's card by simply customizing the positioning of the elements and the opacity.

  • Interior Design Studio Showcase

    For this showcase we animated (Advanced CSS Animator) a panel that slides out upon click on the customize button. It contains colorpickers for all 3 boxes that change their background and font ...

  • Concept Car Gallery Showcase

    For this showcase we used DMXzone Supersized in order to present the product images in full screen. When dragged, the DMXzone Slider changes the picture, which fades in/out with the help of Advanced ...

  • Animator & Supersized Showcase

    For this showcase we used div containers that contain text, being animated (Advanced CSS Animator) through the behavior connector. Also we use the DMXzone Supersized in order to use fullscreen images ...

  • Product Catalog Showcase

    In this showcase we animated a div container with text and images that expands when you click on the 'open' button. In order to do that we used translate animation.

  • Apartments and Houses Showcase

    This showcase features Advanced CSS Animator that is connected to the DMXzone Slider so that you can navigate the panoramic image and explore it fully.

  • 360 Degrees View Showcase

    In this showcase, we used 36 images, each photographed with 10 interval and added them to an HTML5 Slideshow. In order to simulate the rotation, we connected the horizontal DMXzone Slider to the ...

  • Sliding Animated Website

    For this showcase we put our images/content in a DMXzone Supersized slideshow and added fade in/out effects with the Advanced CSS Animator, when changing the slides.

  • Tech Store Showcase

    For this showcase the navigation is created with the Universal CSS Navigation Menu, the mouse over effect on the images with Advanced CSS Animator, the menus within the images with Sliding Menu and ...

  • Our Portfolio Showcase

    In this showcase we've combined Advanced CSS Animator with Advanced Tooltips to visualize beautiful portfolio with cool effects and handy tooltips.

  • Underwater Photos Showcase

    In this showcase you can see how we combined the Advanced CSS Animator which navigates the Sliding Panels and also gives the images' thumbnails some great effects on mouse over.

  • HTML5 MP3 Player & Advanced CSS Animator Showcase

    In this showcase we show you a perfect example of combining Advanced CSS Animator with the HTML5 MP3 Player. Thanks to the CSS Animator, the speakers are animated and the MP3 Player is taking care of ...

  • Animated Layout Showcase

    A beautiful demo, which shows how easy it is to animate a layout, and a video to guide you through the process of animating color of HTML5 elements.

  • HTML5 Slideshow and Advanced CSS Animator

    In this showcase we combine the power of the Advanced CSS Animator to extend the functionality of the HTML5 Slideshow by setting each image Title and Description in separate div element, which is ...

  • HTML5 Suite

    In this showcase we've used seven out of nine extensions packed in the HTML5 Suite to create a Website. We've also added tips, so you can explore each detail how it's been made and which extensions ...

  • Advanced CSS Animator Showcase

    This showcase shows a div that slides with the help of Advanced CSS Animator. Transparent images are used to add visual effects.

  • Famous Cities in the World Showcase

    This showcase shows a div that slides with the help of Advanced CSS Animator. Transparent images are used to add visual effects.

  • Raindrops Showcase

    In this showcase you can explore the random animations you can create using the Advanced CSS Animator.

  • Find Your True North Showcase

    The showcase will show you how you can create your own compass with Advanced CSS Animator.

  • Random Slide In Thumbs Showcase

    In this showcase we will show you the great random slide in animation for your photo thumbnails.

  • Random Animation Showcase

    In this showcase we will show you the great random animation you can create. Also, you can animate anything from border colors and size, and make elements come from random places.

  • Animated CSS Image Gallery Showcase

    In this showcase we will show you an example of a Slide In Gallery, which was designed with CSS Image Gallery and animated with Advanced CSS Animator.

  • Splash Showcase

    In this demo we will show you how the bombs drop on click using the Advanced CSS Animator.

  • Colors Showcase

    In this demo we will show you how the smilies glow in all colors on mouse over with the Advanced CSS Animator.

  • Popup Showcase

    The showcase will show you how you can create your own compass with Advanced CSS Animator.

  • Drop In Showcase

    The showcase shows you how easily you can create such Slide Out menu without using any Flash or coding! Each item is simply animated with the help of Advanced CSS Animator.

  • Slide Out Menu Showcase

    In this showcase we will show you the great random slide in animation for you photo thumbnails.

  • Flames Gallery Showcase

    In this showcase we've used the Advanced CSS Animator to animate each element in order to create a fantastic gallery with amazing effects.

  • Side Slide Menu Showcase

    The showcase shows you how easily you can create such Slide Out menu without using any Flash or coding! Each item is simply animated with the help of Advanced CSS Animator.

Videos

Basic Usage

Animating Border Colors with Advanced CSS Animator

With this movie we will show you how to change the border color of your elements when the mouse goes over them.

Watch the movie read more

Creating a Popup effect onMouseover

With this movie we will show you how to create a great popup effect onmouseover using the Advanced CSS Animator.

Watch the movie read more

Dynamic Usage

Advanced CSS Animator in Action by Brian Wood

In this movie Brian Wood will show you how to apply text and link onmouseover using the Advanced CSS Animator.

Watch the movie read more

Advanced CSS Animator in Action

In this movie Brian Wood will show you how to apply text and link onmouseover using the Advanced CSS Animator.

Watch the movie read more

Using Advanced CSS Animator to Add Cool Effects

In this movie Brian Wood will show you how to build a web page with animation effects using the Advanced CSS Animator.

Watch the movie read more

Creating Image Overlay Effect

With this movie we will show you how to create an image overlay effect using Advanced CSS Animator.

Watch the movie read more

Creating Random Slide In Animation

With this movie we will show you how to create great random slide in animation for your photo thumbnails using Advanced CSS Animator.

Watch the movie read more

Creating a Popup effect onMouseover

With this movie we will show you how to create a great popup effect onmouseover using the Advanced CSS Animator.

Watch the movie read more

Creating Slide Out Menu

With this movie we will show you how to create Slide Out menu with Zoom in menu items.

Watch the movie read more

Bundle Usage

Creating Slide Out CSS Navigation Menu

With this movie we will show you how to create a Slide Out Universal CSS Navigation Menu using Advanced CSS Animator.

Watch the movie read more

 


Requirements

Type: Behavior
License: External link
Product: Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X
Browser: Opera 7, Opera 8, Opera 9, Safari 2.0, IE 7, Firefox 3.6+, Opera 9.5, Safari 3, Chrome 9+, IE 8, Safari 4+, Opera 10+, iPad, IE 9
Used Technologies: jQuery, CSS, Web 2.0
Screen Shot: External link
Tags: css,animator,dreamweaver,jquery,animation


History

Version 1.0.8

  • Full Dreamweaver CC and Extension Manager CC support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.0.7

  • Improved color animations for the latest browsers
  • Improved border radius animations
  • Improved compatibility with the new jQuery 1.8.3 and jQuery 1.9.1
  • Improved Dreamweaver UI and integration
  • Improved source file compression for smaller files and faster loading
  • Improved installer for for DW CS 5.5+ and Mac DW CS6

Version 1.0.5

  • Improved compatibility with newest jQuery 1.6+ versions
  • Improved random and expression value animations for the latest jQuery
  • Fixed animation of presets using the step: function
  • Included latest jQuery 1.6.3

Version 1.0.4

  • Improved iPad and iPhone scrolling support and also added iPod support
  • Smaller JavaScript files by better compression
  • Improved jQuery version recognition and include
  • Improved related files include method
  • Compatibility now with site root relative links Dreamweaver option for making all includes site root relative
  • Improved styles cleaning when changing the Sliding Panels style

Version 1.0.3

  • Major code optimization and rewrite for the latest browser support
  • Advanced Color animations, supporting now RGB, RGBA, HSL and HSLA color syntax
  • Supporting random syntax now also with colors
  • Support for animating of the border radius CSS property
  • Support for the newest jQuery 1.4+

Version 1.0.2

  • Fixed compatibility with Sliding Billboard
  • Improved support for custom CSS properties
  • Improved working in Dreamweaver Templates

Version 1.0.1

  • Full support for random values! Now you can make element come in from all random places! You can make random border sizes, choose random colors to animate! Let things come to live!
  • Improved context selector let's you easier select where to apply the animations
  • Improved presets with support for custom description
  • Improved User Interface
  • New dialog called "Advanced Value Editor" for a more visual setting of values
  • Support for random color, easing and duration
  • Support for keywords "top", "bottom", "left", "right" and center for positioning properties
  • Presets will now handle all the Animator options
  • Fixed the broken delay option

Update Procedure:

Just open a page using the Advanced CSS Animator. You will see a progress bar indicating new files are being copied. After that a dialog will popup with the list of the new files. Depending on if you have remote site defined and you have site synchronization enabled, the files will be automatically synchronized or you will be presented an option to upload all files.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article