Coder Social home page Coder Social logo

xianxingzhe / all-animation Goto Github PK

View Code? Open in Web Editor NEW

This project forked from all-animation/all-animation

0.0 2.0 0.0 5.37 MB

All Animation.css é um conjunto de animações, divertidas para deixar seu projeto mais sexy. São animações cross-browser que darão mas ênfase a suas páginas como controles deslizantes, efeitos 3D’s..

CSS 99.75% JavaScript 0.25%

all-animation's Introduction

All Animation

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 .

move to the Portuguese language

##Try the demo View demo

Contribuidores:

If you want to contribute to our project, read the file: contribuidores.md ;)

Como Usar:

It's easy to use this css framework: D we will see step by step how to use it ...

Step 1, include the necessary files in the head , so that the framework work correct:

download the all animation: click here

<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
<script type="text/javascript" src="yourpath/jquery.js"></script>

Step 2, html:

<div id="animation"></div>

<button class="anny-class">Trigger class, go!</button>

Step 3, Jquery:

$(".anny-class").click(function(){
 $("#animation").addClass("journal");
});

Optional

If you want to add the effect at some specified time , it is to place a timer ;)

ex, placing an animation in a particular element , after 2 seconds:

setTimeout(function(){
 $("#animation").addClass("journal");
},2000);

Caution:

If you want to add some animation on an element that has suffered another animation of this framework , or want to restart the animation , you have to remove the last animation and submit your. Ex:

 $("#animation").removeClass("journal").addClass("four-rock");

We have several classes in place of the journal class, let's see which are:

Especiais:

  • dance
  • journal
  • pulse
  • pulse-slow
  • jamp
  • four-rock

Bounce:

  • enter-up-bounce
  • enter-down-bounce
  • enter-right-bounce
  • enter-left-bounce
  • scale-bounce
  • jump-bounce

Perspective:

  • tree-flip-right
  • tree-flip
  • tree-flip-up
  • tree-flip-down
  • flip-left-bounce
  • rotate-flip
  • flip-right-bounce

Fading Entrances:

  • flip-top
  • flip-left
  • flip-right
  • flip-bottom

Rotate:

  • rotate-flip-down
  • rotate-down-bounce
  • rotate-out

Agrecives:

  • flash-bang
  • bomba


####Credits:

Clóvis Neto

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.