Back to Top
The nuts and bolts for
Creative web development

HTML5 Animate CSS

“Just-add-water CSS animations”
So you want to amaze your users with the latest design trends and alert them visually on content change? Then HTML5 Animate CSS Dreamweaver extension is the right choice for you. With its 35 gorgeous animations to choose from and the dedicated floating panel, you can virtually animate HTML elements, repeat and detail regions from HTML5 Data Bindings for fantastic presentations of your rich, dynamic web sites and mobile apps. Empower amazing on page scroll animations when a specific element becomes visible for the greatest impact on your users.

All CSS animations are driven by HTML5 tags and CSS3 transitions, based on the rock solid Animate.css library by Dan Elden, that gives you full cross-browser support with graceful degradation and maximum hardware acceleration.

Features

  • Virtually animate any page element - Use a wide range of cross-browser animations to use in your projects. 

 
  • 35 transition effects to choose from - The extension features a set of 35 animations to you on your page.


  • Amazing animations on page scroll - Now you can specify that animations should run when a specific elements becomes visible. With this cool new feature you can create amazing live animated, scrollable pages where elements dynamically appear when they become partially visible.


  • Full integration with HTML5 Data Bindings for fantastic presentation of rich, dynamic web sites and apps
    • Animate repeat regions 


    • Animate conditional and detail regions from HTML5 Data Bindings  


    • Animate div containers 


    • Animate dynamic data regions 
  • Full support for list/repeat regions animations - Now you can specify the animation order of the children of Repeat Regions to achieve fantastic presentation. Let the children appear at the same time, random or reverse!


  • Use HTML5 and CSS3 for animations - All animations are driven by HTML5 tags and CSS3 transitions to allow fully cross browser support and maximum hardware acceleration.

  • Fully compatible with HTML5 Data Bindings and Add-ons - HTML5 Animate CSS can be used in conjunction with HTML5 data Bindings and other DMXzone extensions.


  • Awesome Dreamweaver integration - With the dedicated floating panel inspector for HTML5 Animate CSS, you can inspect and change the properties of any element to be animated. The panel can be nicely docked behind the regular property inspector so it is always available at your finger tips.


  • Full cross-browser support - Animate at the best with the latest browsers and degrade gracefully without any disturbance for the older browsers.

Showcases


  • Luxury Watches Showcase

    For this showcase we used HTML5 Animate CSS for the amazing onload animations which summarize two images into one and turns out the content into an interactive adventure.

  • Animated Restaurant Showcase

    For this showcase we designed an amazing page which triggers onload animations with the help of HTML5 Animate CSS. The layout is created with DMXzone bootstrap 3, DMXzone Bootstrap 3 Navigation and ...

  • Animated Icons Showcase

    For this showcase we used DMXzone Bootstrap 3 and Navigation for the responsive layout. The page content features all 71 new shiny icons included in the latest version of DMXzone Font Awesome. ...

  • Web Development Company Showcase

    For this showcase we used the Extended Bootstrap 3 Collection in order to design an awesome Development Company website. The page features fully responsive layout with animated content, great ...

  • Extended Bootstrap 3 Store Showcase

    For this showcase we used the entire Extended Bootstrap 3 Collection, which includes various DMXzone extensions. The responsive layout, content, navigation and the design theme are created with all ...

  • Interactive CV Showcase

    For this showcase we designed animated timeline with HTML5 Animate CSS and branded navbar, using DMXzone Bootstrap 3, Elements and Navigation.

  • Responsive Animated Portfolio Showcase

    For this showcase we used DMXzone Bootswatch flatly theme, DMXzone Bootstrap, Elements and Navigation for the page layout and content. Also the images are stored in a local JS file, using HTML5 Data ...

  • DMXzone Bootswatch Showcase

    For this showcase we used one of the 15 amazing designs supplied in the DMXzone Bootswatch extension. We first built the design and the content using DMXzone Bootstrap 3 and Elements, then used ...

  • Luxury Beach Villa Showcase

    For this showcase we used DMXzone Bootstrap 3 Navigation in order to create a fully responsive navbar, which becomes collapsible when viewed on mobile devices. We also added a fully responsive ...

  • Graphic Designer Portfolio Showcase

    For this one page scrollable showcase we used DMXzone Bootstrap 3 and the Elements for the responsive design and HTML5 Animate CSS for the content elements animations. Using DMXzone Bootstrap 3 ...

  • Test Drive Showcase

    For this showcase we created a custom slider with HTML5 Animate CSS which is also dynamic and fully responsive. It comes with custom control buttons to navigate through the images that are retrieved ...

  • Fashion Store Featured Items Showcase

    For this showcase we used DMXzone Database Connector and HTML5 Data Bindings to connect to our database and animated the repeat region. We also animated the navigation menu on page load and added a ...

  • Luxury Veach Village Showcase

    For this showcase we used DMXzone Bootstrap 3 and its Elements for the page layout, and DMXzone Font Awesome for the beautiful icons. The page content has been animated onscroll with HTML5 Animate ...

  • Interior Design Studio Showcase

    For this showcase we used HTML5 Data Bindings and HTML5 Animate CSS to apply animations on repeat regions, which are our image thumbnails and also on detail regions that contain the larger images. ...

  • On Page Scroll Animation Showcase

    For this showcase we used HTML5 Animate CSS in order to create an amazing animation on page scroll. We specified the animations it runs when an element becomes visible.

  • HTML5 Animate CSS Preview Showcase

    For this showcase we used HTML5 Data Bindings to connect our Picasa feed. The image thumbnails are retrieved in a repeat region, which we animated with fade in effect, random order and fast delay. ...

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Browser: Opera 10+, iPad, IE 9, Safari 5+, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: jQuery, CSS, Responsive
Screen Shot: External link
Tags: animation, CSS, CSS3, HTML5, Dreamweaver


History

Version 1.0.2

  • Included the latest jQuery 1.11.1
  • Improved for Dreamweaver CC 2014
  • Improved for DMXzone Extension Manager

Version 1.0.1

  • Greatly improved in-view animations on touch devices! Now your scrolling animations, especially on iOS are butter smooth!

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 most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article