Fork me on GitHub

AllAnimationCss3

All animation.css is a set of fun animations to make your project sexier. They are cross-browser animations but that will emphasize your pages as sliders , 3D effects 's .

What is All Animation CSS3?

The all animation is a framework css3 created focusing on 3D 's animations and cross browsers. Recently released an update of all animation , which were inserted several animated components made in small lines of CSS3 / Stylus.

More than 8000 hits per month

According to Google Analytics, the greatest hits are coming from Japan, United States, Brazil, China and Canada.

Mobile

You don't need to import various media queries to fix your CSS animations on mobile. ;)

Easy to implement

You just need to add a simple class and everything will be working perfectly!

Examples - Click the buttons

1 Especials

2 Bounce

3 Perspective

4 Fading Entrances

5 Rotate

6 Agreccives

7 Legend

8 Portrait

9 Rotate

Animated Components

Double Acordeon

Acordeon

Tab Panel

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.


Tab Slide Panel

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.


Menus






Check In

Trigger On / Off

Rádio

Puft In

Puft Out

Puft Left

Puft Right

Puft Top

Puft Bottom

Get Started

Step 1

Include the necessary files in the head , so that the framework work properly


<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
                     

Step 2

To add the animation you can enter there by JavaScrip dynamically or statically placed there by html

    
        <div class="dance"> 
            Trigger Class...
        </div>
    

Or jQuery - Optional

The inclusion of jQuery is optional , you can also add a dynamic class with querySelectors

    
        <div> 
        </div>

        <button>Trigger class go</button>
    

Using jQuery:

    
        $("button").click(function(e){
            e.preventDefault();
            $(div).addClass('dance');
        });
                            
                    

or vanilha js:

    
        document.querySelector('button').addEventListener('click',function(e){
            e.preventDefault();
            document.querySelector('div').classList.add('dance');
        })
                            
                    

Full Documentation

You can read the full documentation on github

More on GitHub

Donate

We still have much to develop if you want to contribute , the framework code is open on github.

The team All Animation CSS3 needs your help if you want to keep the online project :)

Contact

Regarding any concerns or suggestions, you can contact by email: clovisdasilvaneto@gmail.com

Clóvis Neto

Hi developers, my name is Clovis Neto. I am Web Developer Engineer in recife

I am in love with javascript!

I like to face new projects and I am always seeking to contribute and help in open-source ones. I'm currently developing my own javascript library and updating the All Animation CSS3 to version 2.0

Clóvis Neto
Web Developer Enginner

Get Connected

Simple install All Animation

with bower


bower install all-animation
                 

All Animation is current version 1.1.0

click here to download minified version click here to download production version