A repository of over 1000 quality jQuery plugins

jQuery JQuery DebugCssAnimation

JQuery DebugCssAnimation is a jQuery Animation & Effects plugin.

Created by Zehfernandes

jQuery plugin to Debug quickly CSS animations

Not what you're looking for? Click here to view more Animation & Effects jQuery plugins

jQuery.DebugCssAnimation

jQuery plugin to Debug quickly CSS animations. The plugin create a control station for you: pause, play and reset each element or all with css class debug-animation

alt text

Check the demo

Setup

jQuery Debug Css Animation depends on jQuery. Include them both in end of your HTML code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://zehfernandes.github.io/jQuery.DebugCssAnimation/dist/jquery.debugcssanimation.min.js"></script>

then in your code do:

$('body').debugCssAnimation({
    debugClass: "debug-animation"
});

and put the css class debug-animation in the elements that you want debug, like this:

<h1 class="debug-animation anotherclass">Debug Css Animations</h1>
<p class="debug-animation">Lorem ipsum</p>

Bookmarklet

Alternatively, you can use the tool as a bookmarklet. See the bookmarklet demo page for more details.

To-do

  • Better input using the bookmarklet tool
  • Try to discover a way to build a timeline (if you have a idea how to do that. Help! :D)
  • Add CSS Transition support
  • Put a button for change the easing effects during the tests.

Thanks



You might also like these other Animation & Effects jQuery Plugins