test browser supports the style or not <p>I can do the following to check if the browser doesn't support column-count css3 property then use my own code:</p> <pre><code>if (!('WebkitColumnCount' in document.body.style || 'MozColumnCount' in document.body.style || 'OColumnCount' in document.body.style || 'MsColumnCount' in document.body.style || 'columnCount' in document.body.style)) {//my own code here} </code></pre> <p>But how can I check that background-image animation support?</p> <p>This type of changing image source with css3 only works on chrome browsers.</p> <pre><code>0%{background-image: url(image-1);} 50%{background-image: url(image-2);} 100%{background-image: url(image-3);} </code></pre> <p>So, I wanted to know is there any technique that we can test that it is supported by the browser or not?</p> <p><strong>Update</strong></p> <p>I just tried like this code which is even not checking @keyframes style support:</p> <pre><code>if (('@keyframes' in document.body.style || '@-webkit-keyframes' in document.body.style)) { //if(!('from' in @keyframes || 'from' in @webkit-keyframes)){ //code in here alert('test'); //} } </code></pre> <p>So even can I not test that @keyframes supported by browser or not?</p> <hr> <p><strong>Solution:</strong></p> <p>I've found from <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support" rel="nofollow">mdn</a></p> <pre><code>var animation = false, animationstring = 'animation', keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = ''; if( elm.style.animationName !== undefined ) { animation = true; } if( animation === false ) { for( var i = 0; i &lt; domPrefixes.length; i++ ) { if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { pfx = domPrefixes[ i ]; animationstring = pfx + 'Animation'; keyframeprefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } } } </code></pre>