Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery keyframe
JavaScript
tree: 093231f83d

- added support of all browsers (ms, o, moz & webkit);

- using live events instead of bind;
- added a more detailed readme
latest commit 093231f83d
@iamntz authored

README.md

jQuery.keyframe()

What it this?

CSS3, among other neat features, brings us the bliss of advanced animation techniques. (you can read more about this here)

Unfortunately, browser vendors (Mozilla, Google, Opera) and Microsoft decided to only implement animation-related events for only start, end and loop. There is no way of knowing when you are at, let's say... 65% with your animation. Therefore I created this plugin, that does exactly this: custom events on various % of the animation.

Compatibility

The plugin was only tested on latest stable version of Chrome and Firefox (right now 19.x and 13.x). However, this might work on Internet Explorer 10 (no support for keyframe css animation in earlier version, hence no js support either), and latest Opera.

Known issues

Being somehow experimental and heavly tested on Chrome, the plugin might have some issues in other browsers:

  • Event is triggered only on 5% steps (5%, 10%, 15% and so on)
  • Firefox 13 doesn't trigger the 100% keyframe.
  • Chrome doesn't trigger the 100% keyframe everytime (most of times it does). Best workaround is to rely on animationEnd event.
  • Firefox 13 doesn't trigger all keyframes on fast...ish animation ( less than 4-5s ). Chrome play nice down to 1s. Animation faster than 1s will skip frames every now and then.

Demo

More info

Something went wrong with that request. Please try again.