Do not animate 'display' or animation/transition properties.

Certain properties are not animatable.
For example, properties defining animation parameters are not animatable.
https://w3c.github.io/web-animations/#concept-not-animatable

Web Animations must ignore such properties.

This closes #394

Author: ericwilligers

src/normalize-keyframes.js

@@ -150,8 +150,16 @@
     return value;
   }
 
+  function isNotAnimatable(property) {
+    // https://w3c.github.io/web-animations/#concept-not-animatable
+    return property === 'display' || property.lastIndexOf('animation', 0) === 0 || property.lastIndexOf('transition', 0) === 0;
+  }
+
   // This delegates parsing shorthand value syntax to the browser.
   function expandShorthandAndAntiAlias(property, value, result) {
+    if (isNotAnimatable(property)) {
+      return;
+    }
     var longProperties = shorthandToLonghand[property];
     if (longProperties) {
       shorthandExpanderElem.style[property] = value;

test/js/keyframe-effect-constructor.js

@@ -354,4 +354,29 @@ suite('keyframe-effect-constructor', function() {
     effect.timing.iterations = 2;
     assert.closeTo(Number(getComputedStyle(target).opacity), 0.75, 0.01, 't=125 after setting iterations');
   });
+
+  test('Not Animatable properties are not animated', function() {
+    var target = document.createElement('div');
+    target.style.opacity = 0;
+    target.style.display = 'block';
+    target.style['animation-timing-function'] = 'ease-in';
+    target.style['transition-duration'] = '2s';
+    document.body.appendChild(target);
+
+    var keyframeEffect = new KeyframeEffect(target, [
+      {opacity: '0.75', display: 'none', animationTimingFunction: 'linear', transitionDuration: '5s'},
+      {opacity: '0.25', display: 'none', animationTimingFunction: 'linear', transitionDuration: '5s'}
+    ], 2000);
+
+    var animation = document.timeline.play(keyframeEffect);
+
+    tick(0);
+    assert.equal(getComputedStyle(target).opacity, 0.75);
+
+    tick(1000);
+    assert.equal(getComputedStyle(target).opacity, 0.5);
+    assert.equal(getComputedStyle(target).display, 'block');
+    assert.equal(getComputedStyle(target).animationTimingFunction, 'ease-in');
+    assert.equal(getComputedStyle(target).transitionDuration, '2s');
+  });
 });