Simple animation implementation uses CSS Animation where available uses MooTools' Fx for other browsers

animation.js

/*
---
name        : Animation
provides    : Animation
description : |
  Simple animation implementation
  uses CSS Animation where available
  uses MooTools' Fx for other browsers

authors     : Valerio Proietti (http://mad4milk.net)
copyright   : Valerio Proietti (http://mad4milk.net)
license     : MooTools MIT-Style License (http://mootools.net/license.txt)

requires    : 
- "Core:1.2/Class"
- "Core:1.2/Chain"
- "Core:1.2/Events"
- "Core:1.2/Options"
- "Core:1.2/Fx.Morph"
- "Core:1.2/Element.Event"
...
*/

var Animation = new Class({
	
	Implements: [Options, Events, Chain],
	
	options: {
		duration: 500,
		equation: 'ease-in-out'
	},
	
	initialize: function(element, options){
		this.setOptions(options);
		this.element = document.id(element);
		
		this.cssTransitions = (window.WebKitTransitionEvent != null);
		
		this.equations = {
			'linear': 'linear',
			'ease-in': 'sine:in',
			'ease-out': 'sine:out',
			'ease-in-out': 'sine:in:out'
		};
		
		var end = this.end.bind(this);
		
		if (!this.cssTransitions){
			this.fx = new Fx.Morph(this.element, {duration: this.options.duration, transition: this.equations[this.options.equation]});
			this.fx.addEvent('complete', end);
		} else {
			this.element.style.WebkitTransitionProperty = 'none';
			this.element.style.WebkitTransitionDuration = this.options.duration + 'ms';
			this.element.style.WebkitTransitionTimingFunction = this.options.equation;
			this.element.addListener('webkitTransitionEnd', end);
			this.previousAnimationID = null;
		}
	},
	
	start: function(properties){
		// i'm simply stopping everything here if there's an animation in progress. webkit css animations cannot be stopped.
		if (this.isAnimating) return this;
		this.isAnimating = true;
		this['start' + ((this.cssTransitions) ? 'CSS' : 'FX')](properties);
		return this.fireEvent('start');
	},
	
	startFX: function(properties){
		this.fx.start(properties);
	},
	
	startCSS: function(properties){
		this.animationID = $time();
		
		var key, keys = [], animations = {};

		for (key in properties){
			var camel = key.camelCase();
			keys.push(key.hyphenate());
			var value = $splat(properties[key]);
			if (value[1] != null){
				animations[camel] = value[1];
				this.element.style[camel] = value[0];
			} else {
				animations[camel] = value[0];
			}
		}
		
		(function(){ // this 1ms delay fixes a weird bug where setting WebkitTransitionProperty affects previously set styles.
			this.element.style.WebkitTransitionProperty = keys.join(', ');
			for (key in animations) this.element.style[key] = animations[key];
		}).delay(1, this);
	},
	
	end: function(){
		if (this.cssTransitions){
			// animationID is used to filter out concurrent properties. otherwise webkit css animations throw one event per property.
			if (this.animationID == this.previousAnimationID) return;
			this.previousAnimationID = this.animationID;
			this.element.style.WebkitTransitionProperty = 'none';
		}
		this.isAnimating = false;
		this.fireEvent('end').callChain();
	},
	
	toElement: function(){
		return this.element;
	}
	
});