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

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

• Jquery Boilerplate
• Nicola Gallagher - Pure CSS GUI icons
• ZoranJambor the bookmarklet tool
• EpicCheddar ideas and debate