cssAnimate

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:

jQuery animations: Easy an short syntax, but they are too slow. Especially on mobile devices...
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

Full support for the jQuery animation syntax.
Uses CSS3 animations
Compatibility! If a browser doesn't support CSS3, there is a fallback to jQuery-animate automatically.
Use callback functions, delays and queues.
Stop running animations! (Not completely implemented right now.)
Use the jQuery animation presets (fadeIn, fadeOut...)
Animations on every property are possible! Even those, that aren't supported by jQuery (transform, shadow, border-radius...)
Easing without jQuery-Easing-Plugin!
Extends the jQuery .css()-command. Now with vendor prefix autocomplete.

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

cssAnimate does not change the behavior of ".css()" that much anymore. ".css()" keeps all the transition properties now. If you want the old cssAnimate-css run "$.cssReplace()" once.

New in 1.1.7 · Download

If you are using jQuery 1.8 or later, the cssAnimate vendor prefixing is disabled and the jQuery solution will be used. So you always have vendor prefixing with any jQuery version.

New in 1.1.6 · Download

".css()" never performs a change animated anymore.

New in 1.1.5 · Download

Enhanced the jQuery ".css()". If you change transform, borderRadius, boxShadow... all the browser specific prefixes (webkit, moz, ms...) will be added automatically.
Support for CSS bezier curves.