diff --git a/src/normalize-keyframes.js b/src/normalize-keyframes.js index 241fd38..1fd0254 100644 --- a/src/normalize-keyframes.js +++ b/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; diff --git a/test/js/keyframe-effect-constructor.js b/test/js/keyframe-effect-constructor.js index b7b0046..70cb110 100644 --- a/test/js/keyframe-effect-constructor.js +++ b/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'] = '0s'; + 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, '0s'); + }); });