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!
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
-
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.
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.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.
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.
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.
Creating Image Overlay Effect
With this movie we will show you how to create an image overlay effect using Advanced CSS Animator.
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.
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.
Creating Slide Out Menu
With this movie we will show you how to create Slide Out menu with Zoom in menu items.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.
Creating a Sliding Content Box with Advanced CSS Animator
Creating Animated Captions for DMXzone Supersized
Using DMXzone Slider with Advanced CSS Animator
Creating Thumbnail Preview Effect
Creating a Fullscreen iPad Gallery with Animated Thumbnails
Animating Colors of your HTML Elements
Creating Image Gallery with Animated Thumbnails
Applying a nice Spin-in Effect to HTML5 Slideshow
Requirements
History
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
George 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.
