测试浏览器是否支持该样式

我可以执行以下操作来检查浏览器是否不支持列计数 css3 属性，然后使用我自己的代码：

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}

但是我如何检查背景图像动画支持？

这种使用 css3 更改图像源的类型仅适用于 Chrome 浏览器。

0%{background-image: url(image-1);}
50%{background-image: url(image-2);}
100%{background-image: url(image-3);}

所以，我想知道有什么技术可以测试浏览器是否支持它？

Update

我只是尝试像这样的代码，它甚至没有检查 @keyframes 样式支持：

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');
   //}
}

那么我是否可以不测试浏览器是否支持@keyframes？

解决方案：

我发现从mdn https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support

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 < domPrefixes.length; i++ ) {
    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
      pfx = domPrefixes[ i ];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}

以及提到现代化者 http://modernizr.com/download/在评论中 - 我们可以首先添加供应商前缀 http://caniuse.com/#search=animation让背景动画获得更多的浏览器覆盖率。喜欢 ：

#animationdivTest { 
   animation: animatedBackground 20s linear infinite;
   -ms-animation: animatedBackground 20s linear infinite;
   -moz-animation: animatedBackground 20s linear infinite;
   -webkit-animation: animatedBackground 20s linear infinite;
}

我猜你在做什么动画

在 javascript 中对此进行直接检查可能是

/* check a doc.fragment div or test div on page */
var el = document.getElementById('animationdivTest');
/* create a function here to test for ALL the vendor prefixes 
( this is where modernizer comes in v handy )

 one example - */
if( el.style['-webkit-animation'] !== undefined ) {
   document.getElementsByTagName("html")[0].className +=' cssanimation'; 
}

然后我们的 CSS 就可以定制了：

.cssanimation #animationdiv { 
       animation: animatedBackground ...

我们可以在这里现场表演——http://jsbin.com/yamepucu/1/edit http://jsbin.com/yamepucu/1/edit

不确定这对你已经知道的有多大帮助，希望某些部分能做到。

Update:展示如何测试style.animation可以与检查结合起来style.background-image ( 检查背景图像可以告诉我们 @keyframes 是否已应用 )

尝试现场演示 http://jsbin.com/hinidape/1/edit

HTML

  <div id="animationdivTest">Testing...</div>
  <div id="animationdiv"></div>

CSS

@-webkit-keyframes bgAnimation {
  0% {
    background-image: url('http://www.new4.co.uk/flip/flip-3.gif');
  }
  40% {
    background-image: url('http://www.new4.co.uk/flip/flip-2.gif');
  }
  70% {
    background-image: url('http://www.new4.co.uk/flip/flip-1.gif');
  }
  100% {
    background-image: url('http://www.new4.co.uk/flip/flip-0.gif');
  }

}

#animationdivTest, .cssbgAnimation #animationdiv {

  width: 90px;
  height: 240px;
  -webkit-animation-name: bgAnimation;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;

}

#animationdiv:after { content:"Sorry not supported"; }  
.cssbgAnimation #animationdiv:after { content:""; }
.cssbgAnimation #animationdivTest { position:absolute; left:-999px; top:-9999px; }

示例 JS 这次添加到函数循环中以检查其他供应商前缀.

var el = document.getElementById('animationdivTest');
function hasBgAnimSupport() {
  var does =false, 
  animVendorprefixes = ['animation','-ms-animation','-moz-animation','-webkit-animation'];

  for(i=0, len = animVendorprefixes.length; i<len; ++i) {
    if( el.style[animVendorprefixes[i]] !== undefined ) { 
      if( el.style['background-image'] !== undefined ) {
        does=true; break;
      }
    }
  }
  return does;
 } 


if(hasBgAnimSupport() ) { 
   document.getElementsByTagName("html")[0].className +=' cssbgAnimation';
}

AFAIK - 这是我们可以检查的最接近且面向未来的方法