fix animation property namespacing

lib/style-transform.js

@@ -159,18 +159,58 @@
                     var third = line.charCodeAt(2) || 0;
 
                     // animation: a, n, i characters
-                    // bail if dash, unless animation-name
                     if (first === 97 && second === 110 && third === 105) {
-                        if (45 /* - */ !== line.charCodeAt(9) || 110 /* n */ === line.charCodeAt(10)) {
-                          // remove space after `,` and `:` then split line
-                          var split = line.replace(regAnimation, '$1').split(':');
+                      var ninth = line.charCodeAt(9) || 0;
+                      var tenth = line.charCodeAt(10) || 0;
+
+                      var colon = line.indexOf(':')+1;
+                      var build = line.substring(0, colon);
+
+                      var anims = line.substring(colon).split(',');
+
+                      // short hand animation syntax
+                      if (ninth !== 45) {
+                        // because we can have multiple animations `animation: slide 4s, slideOut 2s`
+                        for (var j = 0, length = anims.length; j < length; j++) {
+                          var anim = anims[j];
+                          var props = anim.split(' ');
+
+                          // since we can't be sure of the position of the name of the animation name
+                          // we have to find it
+                          for (var k = 0, l = props.length; k < l; k++) {
+                            var prop = props[k].trim();
+
+                            // animation name is anything not in this list
+                            if (
+                              prop !== 'infinite' &&
+                              prop !== 'linear' &&
+                              prop !== 'alternate' &&
+                              prop !== 'normal' &&
+                              prop !== 'forwards' &&
+                              prop !== 'backwards' &&
+                              prop !== 'both' &&
+                              prop !== 'none' &&
+                              prop !== 'ease' &&
+                              prop.indexOf('cubic-bezier(') === -1 &&
+                              prop.indexOf('ease-') === -1 &&
+                              isNaN(parseInt(prop))
+                            ) {
+                              props[k] = animationSuffix+prop;
+                              anim = props.join(' ');
+                            }
+                          }
 
-                          // build line
-                          line = split[0] + ':' + animationSuffix + (split[1].split(',')).join(','+animationSuffix);
+                          build += (j === 0 ? '' : ',') + anim.trim();
                         }
-
-                        // vendor prefix
-                        line = '-webkit-' + line + '-moz-' + line + line;
+                      }
+                      // explicit syntax 
+                      else {
+                        // n
+                        build += (tenth !== 110 ? '' : animationSuffix) + anims[0].trim();
+                      }
+
+                      // vendor prefix
+                      line = '-webkit-' + build + '-moz-' + build + build;
                     }
                     // appearance: a, p, p
                     // flex: f, l, e