Problem

Wanna use animations dynamically (e.g. in javascript games)? But how is it possible in a fast and clean way?
There are just two possibilities:
  1. jQuery animations: Easy an short syntax, but they are too slow. Especially on mobile devices...
  2. CSS3 animations: Fast and flexible, but you have to write a lot.

Solution

So what could we do? Why can't we just use the great syntax of jQuery to create CSS3 animations?
We can! All the advantages of jQuery and CSS3 are combined in one jQuery Plugin: cssAnimate.

Features

Support

All the browsers that support CSS3 animations and even IE (because of the automatic fallback to jQuery's .animate())...
Only one limitation: At least jQuery 1.4.3 is required.
So it should be no problem to implement cssAnimate in your project...

Example

jQuery way:
$("#id").animate({ opacity:0.7, left:200 }, 2000);
cssAnimate way:
$("#id").cssAnimate({ opacity:0.7, left:200 }, 2000);
And you're done! Pretty simple, isn't it?

You will find some here soon!

.cssAnimate(properties, [duration,] [easing,] [complete])

or .cssAnimate(properties, options)

Use it the way you use .animate().
Only "step" and "specialEasing" are not supported right now.

.cssFadeTo(duration, opacity, [easing,] [callback])

Exactly like .fadeTo()

.cssFadeIn([duration,] [easing,] [callback])

Exactly like .fadeIn()

.cssFadeOut([duration,] [easing,] [callback])

Exactly like .fadeOut()

.cssDelay(duration)

Like .delay(), but you can't set your own queue!

.cssStop()

The cssAnimate equivalent for .stop(true, true). This isn't completely finished right now.
You can't set "clearQueue" and "jumpToEnd". Both values are TRUE right now! So all queued animations are deleted and the running animation will be completed in 0s (not stopped).
I'm currently working on that.

.css3D([enable/disable])

If you want to enable/disable the 3rd axis (hardware acceleration too) on your page run this command.
To enable write "true". For disabling simply write "false".
By default the perspective is 1000. To change this just type another perspective-integer instead of "true"/"false".

.css(properties)

or .css(property, value)

When you embed cssAnimate the jQuery .css() will be extended:
(Nearly) all css properties with vendor specific prefixes can be set without any of those. cssAnimate will do this job for you automatically.

For example:
.css({ color:"#ffffff", borderRadius:"10px" })
will become
.css({ color:"#ffffff", webkitBorderRadius:"10px", mozBorderRadius:"10px", oBorderRadius:"10px", msBorderRadius:"10px", khtmlBorderRadius:"10px", borderRadius:"10px" })
If you are using jQuery 1.8 or later, the cssAnimate vendor prefixing is disabled and the jQuery solution will be used.

Easing

Easing is a bit different in cssAnimate. No easingPlugin is necessary but some cool effects can't be done right now (bouncing, elastic). Here are the supported easing effect and their jQuery-Easing equivalents:
  • swing: swing (default)
  • linear: linear
  • easeIn: easeInQuad
  • easeOut: easeOutQuad
  • easeInOut: easeInOutQuad
  • cubic-bezier(p1, p2, p3, p4): A bezier curve is used.
Download the latest!

New in 1.1.8

New in 1.1.7 · Download

New in 1.1.6 · Download

New in 1.1.5 · Download

New in 1.1.1 · Download

New in 1.1 · No download

New in 1.0.1 · Download

New in 1.0 · No download