Determine if a property is animated using a CSS3 transition?

Question

The list of properties that can be animated with a CSS3 transition is incompatible between browsers and can be changed with newer versions of the browser. For example, -moz-transform is not animated with a -moz transition in FF3.6, but is in FF4.

So, is there a way to detect in JavaScript if a particular property is animated? I would not want a custom flirtation nuance as it is not reliable.

Thanks in advance!

Answer 1

Edit: See Jordan's answer for a good technique for detecting animated properties.

I'm afraid there is no easy way to determine if a property is animated. However, the properties are consistent for the most part (the only problem I encountered is the transition from FF4 + shadow text conversion + conversion).

http://www.w3.org/TR/css3-transitions/#the-transition-property-property-#properties-from-css-

Firefox 3.6 does not support css transitions, you can detect this with a js library like Modernizr:

http://www.modernizr.com/

Answer 2

Yes, there is a way. Below is a demo, explanation below. There are some very important caveats , so make sure you read.

The following code checks to see if the browser can animate between two values.

Code

jsFiddle demo .

/* @param property The property to test. @param from A valid starting value for the animation. @param to A valid ending value for the animation. @param [element] The element to test with. (Required for testing properties with prerequisites, eg "top" requires non-static position.) */ function isAnimationSupported(property, from, to, element) { var doc = document.documentElement, style = doc.appendChild(document.createElement("style")), rule = [ 'capTest{', '0%{', property, ':', from, '}', '100%{', property, ':', to, '}', '}' ].join(''), propCamel = property.toCamelCase(), prefixes = 'moz ms o webkit '.split(' '), // Unprefixed last, see comments. prefixCount = prefixes.length, canAnimate = false; element = doc.appendChild((element) ? element.cloneNode(false) : document.createElement('div')); // Detect invalid start value. (Webkit tries to use default.) element.style[propCamel] = to; // Iterate through supported prefixes. for (var i = 0; i < prefixCount; i++) { // Variations on current prefix. var prefix = prefixes[i], hPrefix = (prefix) ? '-' + prefix + '-' : '', uPrefix = (prefix) ? prefix.toUpperCase() + '_' : ''; // Test for support. if (CSSRule[uPrefix + 'KEYFRAMES_RULE']) { // Rule supported; add keyframe rule to test stylesheet. style.sheet.insertRule('@'+ hPrefix + 'keyframes ' + rule, 0); // Apply animation. var animationProp = (hPrefix + 'animation').toCamelCase(); element.style[animationProp] = 'capTest 1s 0s both'; // Get initial computed style. var before = getComputedStyle(element)[propCamel]; // Skip to last frame of animation. // BUG: Firefox doesn't support reverse or update node style while // attached. doc.removeChild(element); element.style[animationProp] = 'capTest 1s -1s alternate both'; doc.appendChild(element); // BUG: Webkit doesn't update style when animation skipped ahead. element.style[animationProp] = 'capTest 1s 0 reverse both'; // Get final computed style. var after = getComputedStyle(element)[propCamel]; // If before and after are different, property and values are animable. canAnimate = before !== after; break; } } // Clean up the test elements. doc.removeChild(element); doc.removeChild(style); return canAnimate; } // Cribbed from Lea Verou prefixfree. String.prototype.toCamelCase = function() { return this.replace(/-([az])/g, function($0, $1) { return $1.toUpperCase(); }) .replace('-',''); }; 

How to use

Mandatory arguments for this are the property to animate both the start and end values ​​that it must take. If you wish, you can pass an element with other initial stylesets, for example. position: absolute . (The function clones the element, so you can pass the nodes from the document and they will not be changed.) If you do not go through any elements, the animation is tested on a div with any default styles used by UA.

How it works

The keyframe animation rule is added to the dummy style sheet, with the original frame set to from , and the last frame set to . This animation applies to an element. Then we check the computed style for the animated property to see if it is different when the animation starts from the original frame compared to when it starts from the final frame.

The reason for this is that the animation properties for both transitions and keyframe animations are the same, and the browser will only apply keyframe values ​​if the property supports animation.

Cautions (read before use, some of them are nasty!)

There are several inconsistencies in how browsers handle animations. I worked several of them in the most reliable way; however, some of them are intractable.

In particular, Firefox increases position values ​​(for example, left ) on static elements, while others (for example, Webkit and Opera) do not. In fact, the item does not move, but the value of this property is updated. Thus, you will get different results between browsers if you try to animate the position value without passing an element that is not statically located.

Most recent versions of major browsers that support CSS transitions also support CSS keyframes, although some older versions support the first, but not the last. (E.g. Opera 11.)

Finally, if I were to do it more elegantly, I would use prefixfree to determine the correct prefix to use directly; I am currently testing an array of prefixes, starting with a version without a prefix.