Upgraded some stuff

.gitignore

@@ -1,3 +1,5 @@
 .DS_Store
 node_modules
 *.sock
+*.sublime-project
+*.sublime-workspace

.npmignore

@@ -2,3 +2,5 @@ support
 test
 examples
 *.sock
+*.sublime-project
+*.sublime-workspace

examples/docs.html

@@ -149,7 +149,56 @@
                 .pop()
             .end();
         });
+        play(14, function(){
+          move('#example-14 .box')
+          .animate({
+            0: {
+              transform: 'skew(50)'
+            },
+            10: {
+              'margin-left': '200px',
+              transform: 'rotate(90deg)',
+              'border-radius': '20px'
+            },
+            30: {
+              'margin-left': '20px',
+              transform: 'rotate(90deg)'
+            },
+            80: {
+              transform: 'rotate(90deg)',
+              'border-radius': '10px'
+            },
+            90: {
+              'margin-left': '60px',
+              transform: 'rotate(25deg)',
+              'border-radius': '5px'
+            },
+            100: {
+              'margin-left': '0px',
+              transform: 'rotate(25deg)',
+              'border-radius': '5px'
+            }
+          }, {
+            duration: '3s',
+            'iteration-count': 3
+          })
+          .animate({
+            '0%': {
+              height: '50px',
+              background: 'green'
+            },
+            '50%': {
+              height: '30px',
+              background: 'black'
+            },
+            '100%': {
+              height: '50px',
+              background: 'white'
+            }
+          }, '4s 1').end();
+        });
       }, false);
+
     </script>
 
     <style>
@@ -492,6 +541,65 @@ <h3>Move#then([fn])</h3>
         </pre>
       </div>
 
+      <div id="example-14" class="example">
+        <h3>Move#animate(keyframe, props, name)</h3>
+        <p>Apply a CSS3 animation to the element. Define a <em>keyframe</em> in JSON format and set <em>props</em> which is a string like '4s infinite' or a JSON object specifying CSS3 animation properties. Optionally set a <em>name</em> which defaults to 'move-animation-(animation-number)'</p>
+        <a href="#" class="play">Play</a>
+        <div class="sandbox">
+          <div class="box small"></div>
+        </div>
+        <pre class="source">
+          <code>
+move('#example-14 .box')
+          .animate({
+            0: {
+              transform: 'skew(50)'
+            },
+            10: {
+              'margin-left': '200px',
+              transform: 'rotate(90deg)',
+              'border-radius': '20px'
+            },
+            30: {
+              'margin-left': '20px',
+              transform: 'rotate(90deg)'
+            },
+            80: {
+              transform: 'rotate(90deg)',
+              'border-radius': '10px'
+            },
+            90: {
+              'margin-left': '60px',
+              transform: 'rotate(25deg)',
+              'border-radius': '5px'
+            },
+            100: {
+              'margin-left': '0px',
+              transform: 'rotate(25deg)',
+              'border-radius': '5px'
+            }
+          }, {
+            duration: '3s',
+            'iteration-count': 3
+          })
+          .animate({
+            '0%': {
+              height: '50px',
+              background: 'green'
+            },
+            '50%': {
+              height: '30px',
+              background: 'black'
+            },
+            '100%': {
+              height: '50px',
+              background: 'white'
+            }
+          }, '4s 1').end();
+          </code>
+        </pre>
+      </div>
+
       <div class="example">
         <h3>move.select(selector)</h3>
         <p>This function is used throughout move to select elements. For

move.js

@@ -66,6 +66,61 @@
     duration: 500
   };
 
+  move.utils = {};
+
+  /**
+   * Get stylesheet with title 'move' (creates it if doesn't exist).
+   *
+   * @return {Object}
+   * @api public
+   */
+
+  move.utils.__defineGetter__('sheet', function(){
+    if (!move.sheet){
+      sheet = document.createElement('style');
+      sheet.title = 'move';
+      sheet.type = 'text/css';
+      move.select('head').appendChild(sheet);
+      move.sheet = document.styleSheets[document.styleSheets.length-1];
+    }
+    return move.sheet;
+  });
+
+  /**
+   * Get browser supported property given a CSS `prop`.
+   *
+   * @param {String} prop
+   * @return {String}
+   * @api public
+   */
+
+  move.utils.getSupportedProperty = function(prop){
+    var vendorProp, bodyStyle = document.body.style, capProp = prop.charAt(0).toUpperCase().replace(/-(\w)/g,RegExp.$1.toUpperCase()) + prop.slice(1), prefixes = [ "Moz", "Webkit", "O", "ms" ];
+    if (prop in bodyStyle) {
+      return prop;
+    }else{
+      for (var i = prefixes.length - 1; i >= 0; i--) {
+        vendorProp = prefixes[i] + capProp;
+        if (vendorProp in bodyStyle){
+          return '-' + prefixes[i].toLowerCase() + '-' + prop;    
+        }
+      }
+    }
+  };
+
+  /**
+   * Get browser prefix given a CSS `prop`.
+   *
+   * @param {String} prop
+   * @return {String}
+   * @api public
+   */
+
+  move.utils.getPrefix = function(prop) {
+    var prefix = move.utils.getSupportedProperty(prop).match(/-\w+-/);
+    return prefix?prefix[0]:'';
+  };
+
   /**
    * Easing functions.
    */
@@ -156,6 +211,7 @@
     this._rotate = 0;
     this._transitionProps = [];
     this._transforms = [];
+    this._animations = [];
     this.duration(move.defaults.duration)
   };
 
@@ -332,29 +388,41 @@
 
   Move.prototype.ease = function(fn){
     fn = move.ease[fn] || fn || 'ease';
-    return this.setVendorProperty('transition-timing-function', fn);
+    return this.setProperty('transition-timing-function', fn);
   };
 
-
-
   /**
    * Set animation properties
    *
    * @param {String} name
    * @param {Object} props
+   * @param {Object|String} props
    * @return {Move} for chaining
    * @api public
    */
 
-  Move.prototype.animate = function(name, props){
-    if (typeof props !== 'undefined'){
-      for (var i in props){
-      	if (props.hasOwnProperty(i)){
-      		this.setVendorProperty('animation-'+i, props[i])
-      	}
+  Move.prototype.animate = function(keyframe, props, name){
+    name = name || 'move-animation-'+(+this._animations.length+1);
+    var keyframeStr = '@' + move.utils.getPrefix('animation') + 'keyframes ' + name + '  {';
+    for (var i in keyframe){
+      var percentage = keyframe[i];
+      keyframeStr += i;
+      if (i.indexOf('%') === -1 && i !== 'from' && i !== 'to'){
+        keyframeStr += '%';
+      }
+      keyframeStr += ' { ';
+      for(var j in percentage){
+        keyframeStr += move.utils.getSupportedProperty(j) + ':' + percentage[j] + '; ';
       }
+      keyframeStr += ' }';
     }
-    return this.setVendorProperty('animation-name', name);
+    keyframeStr += '}';
+    move.utils.sheet.insertRule(keyframeStr, move.utils.sheet.cssRules.length);
+    if (typeof props === 'object'){
+      props = (props.duration || '') + ' ' + (props['timing-function'] || '') + ' ' + (props.delay || '') + ' ' + (props['iteration-count'] || '') + ' ' + (props.direction || '');
+    }
+    this._animations.push(name + ' ' + props);
+    return this;
   }
 
   /**
@@ -369,7 +437,7 @@
     n = this._duration = 'string' == typeof n
       ? parseFloat(n) * 1000
       : n;
-    return this.setVendorProperty('transition-duration', n + 'ms');
+    return this.setProperty('transition-duration', n + 'ms');
   };
 
   /**
@@ -384,7 +452,7 @@
     n = 'string' == typeof n
       ? parseFloat(n) * 1000
       : n;
-    return this.setVendorProperty('transition-delay', n + 'ms');
+    return this.setProperty('transition-delay', n + 'ms');
   };
 
   /**
@@ -401,23 +469,7 @@
     return this;
   };
 
-  /**
-   * Set a vendor prefixed `prop` with the given `val`.
-   *
-   * @param {String} prop
-   * @param {String} val
-   * @return {Move} for chaining
-   * @api public
-   */
-
-  Move.prototype.setVendorProperty = function(prop, val){
-    this.setProperty('-webkit-' + prop, val);
-    this.setProperty('-moz-' + prop, val);
-    this.setProperty('-ms-' + prop, val);
-    this.setProperty('-o-' + prop, val);
-    return this;
-  };
-
+
   /**
    * Set `prop` to `value`, deferred until `.end()` is invoked
    * and adds the property to the list of transition props.
@@ -497,6 +549,22 @@
     return this;
   };
 
+
+/**
+   * Apply a CSS `prop` with the given `val`.
+   *
+   * @param {String} prop
+   * @param {String} val
+   * @return {Move} for chaining
+   * @api public
+   */
+
+  Move.prototype.applyProperty = function(prop, val){
+    this.el.style.setProperty(move.utils.getSupportedProperty(prop), val, '');
+    return this;
+  };
+
+
   /**
    * Commit style properties, aka apply them to `el.style`.
    *
@@ -506,15 +574,12 @@
    */
 
   Move.prototype.applyProperties = function(){
-    var props = this._props
-      , el = this.el;
-
+    var props = this._props;
     for (var prop in props) {
       if (props.hasOwnProperty(prop)) {
-        el.style.setProperty(prop, props[prop], '');
+        this.applyProperty(prop, props[prop]);
       }
     }
-
     return this;
   };
 
@@ -594,18 +659,23 @@
 
     // transforms
     if (this._transforms.length) {
-      this.setVendorProperty('transform', this._transforms.join(' '));
+      this.setProperty('transform', this._transforms.join(' '));
+    }
+    if (this._animations.length) {
+      this.setProperty('animation', this._animations.join(', '));
     }
-
     // transition properties
-    this.setVendorProperty('transition-property', this._transitionProps.join(', '));
+    this.setProperty('transition-property', this._transitionProps.join(', ') + ', ' + move.utils.getSupportedProperty('transform'));
     this.applyProperties();
 
     // callback given
     if (fn) this.then(fn);
 
     // emit "end" when complete
     setTimeout(function(){
+      self.setProperty('transform', null);
+      self.setProperty('animation', null);
+      self.setProperty('transition-property', null);
       self.emit('end');
     }, this._duration);