Do not animate 'display' or the 'animation*' properties.

Author: ericwilligers

src/normalize-keyframes.js

@@ -150,6 +150,10 @@
     return value;
   }
 
+  function isPermittedKeyframeProperty(property) {
+    return property !== 'display' && property.lastIndexOf('animation', 0) === -1;
+  }
+
   // This delegates parsing shorthand value syntax to the browser.
   function expandShorthandAndAntiAlias(property, value, result) {
     var longProperties = shorthandToLonghand[property];
@@ -160,7 +164,7 @@
         var longhandValue = shorthandExpanderElem.style[longProperty];
         result[longProperty] = antiAlias(longProperty, longhandValue);
       }
-    } else {
+    } else if (isPermittedKeyframeProperty(property)) {
       result[property] = antiAlias(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('display and animation* properties are not animated', function() {
+    var target = document.createElement('div');
+    target.style.position = 'absolute';
+    target.style.display = 'block';
+    target.style['animation-timing-function'] = 'ease-in';
+    document.body.appendChild(target);
+
+    var keyframeEffect = new KeyframeEffect(target, [
+      {opacity: '0.75', display: 'none', animationTimingFunction: 'linear'},
+      {opacity: '0.25', display: 'none', animationTimingFunction: 'linear'}
+    ], 2000);
+
+    var animation = document.timeline.play(keyframeEffect);
+
+    tick(0);
+    assert.equal(getComputedStyle(target).opacity, 0.75);
+    assert.equal(getComputedStyle(target).display, 'block');
+    assert.equal(getComputedStyle(target).animationTimingFunction, 'ease-in');
+
+    tick(1000);
+    assert.equal(getComputedStyle(target).opacity, 0.5);
+    assert.equal(getComputedStyle(target).display, 'block');
+    assert.equal(getComputedStyle(target).animationTimingFunction, 'ease-in');
+  });
 });