jQuery

【jQuery】いろいろなアニメーションを実装できるAll Animation

January 21, 2017
AllAnimationCss3

All Animationは3Dのアニメーションとクロスブラウザを中心に作成されたフレームワークCSS3です。

JS&CSS

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

HTML

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

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

jQuery

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

Caution

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

Especiais:

  1. dance
  2. journal
  3. pulse
  4. pulse-slow
  5. jamp
  6. four-rock

Bounce:

  1. enter-up-bounce
  2. enter-down-bounce
  3. enter-right-bounce
  4. enter-left-bounce
  5. scale-bounce
  6. jump-bounce

Perspective:

  1. tree-flip-right
  2. tree-flip
  3. tree-flip-up
  4. tree-flip-down
  5. flip-left-bounce
  6. rotate-flip
  7. flip-right-bounce

Fading Entrances:

  1. flip-top
  2. flip-left
  3. flip-right
  4. flip-bottom

Rotate:

  1. rotate-flip-down
  2. rotate-down-bounce
  3. rotate-out

Agrecives:

  1. flash-bang
  2. bomba

MIT