Morf.js is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions. Morf.js allow us to produce CSS transitions with more compelling effects than just linear, ease, ease-out, ease-in or cubic-bezier. Morf actually does is create a CSS3 animation on the fly for the requested transition. In other words at the time that Morf.transition is called, all the necessary keyframes are generated to give the impression that a transition has taken place.

Even though this is actually a CSS Animation, Morf does its best to masquerade as a transition, event throwing a webkitTransitionEnd event when its finished.

Morf requires the following:

• A WebKit browser capable of CSS Animations (Morf uses @keyframes animations under the hood)
• Shifty.js (>= 0.1.3) - Morf can be downloaded with or without Shifty pre-bundled

Although other browser vendors have started to add CSS Animations (e.g. Firefox 5) they do not yet have an alternative implementation for the WebKitCSSMatrix object which is used to calculate the interpolated matrix values.

Requirements: Webkit browser, Shifty.js
Demo: http://www.joelambert.co.uk/morf/
License: MIT License

Incoming search terms for the article:

• morf js
• webkitCSSMatrix Firefox
• css3 easing
• Shifty js
• WebKitCSSMatrix polyfill
• jquery easeoutcubic easing plot
• Morf jquery
• webkitcssmatrix for firefox
• Morf js requires a browser that supports CSS3 Animations & implements the WebKitCSSMatrix object
• webkitcssmatrix mozilla