jQuery plugin to Debug quickly CSS animations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
.gitignore
.jshintrc
Gruntfile.js
HISTORY.md
README.md
debugcssanimation.jquery.json
package.json

README.md

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