Javascript 在不兼容的浏览器上禁用CSS3动画？

页面加载时，主容器上有淡入动画。
它适用于除IE（9）之外的所有浏览器

是否有方法检测用户是否使用与CSS3动画不兼容的浏览器，并禁用它们，以便他们可以查看页面

HTML

---

---

正如@Karl AndréGagnon所指出的，使用现代化可能是最干净的方式。当浏览器无法使用CSS3动画时，它将向

标记添加

no-cssanimations

类

然后，您可以使用它添加“非CSS3动画支持CSS或javascript”：

• 在CSS中，您将执行

  。无cssanimations.splash{/*…do something*/}

• 在javascript中，您可以执行以下操作：

if（modernizer.cssanimations）{/*…做点什么*/}

if（$（“.no cssanimations”）.length）{/*…做点什么*/}

资源

• 现代化开发版本：
• 使自定义版本现代化（用于产品）：

您应该查看哪个是功能检测库

如果转到下载页面，请选择要检测的功能，然后将脚本添加到站点

这将允许您访问javascript中的Modernizer对象，并向HTML标记添加类（如果选择了该选项）

CSS中的：

.cssanimations .splash {
    // Styles for when CSS animations work
}

if( Modernizr.cssanimations ){
    // Javascript if CSS animations work
}

或在Javascript中：

.cssanimations .splash {
    // Styles for when CSS animations work
}

if( Modernizr.cssanimations ){
    // Javascript if CSS animations work
}

---

希望有帮助：）

如果CSS 3不受支持，动画将被忽略，因此已被禁用

要在JS中正确检测动画属性，无需：

if(typeof(document.body.style.animation) === 'undefined' && typeof(document.body.style.MozAnimation) === 'undefined' && typeof(document.body.style.WebkitAnimation) === 'undefined' && typeof(document.body.style.OAnimation) === 'undefined') {
    // not supported
}

您可以为旧浏览器加载jquery、jquery lite或zepto，并执行以下操作：

if(typeof(document.body.style.animation) === 'undefined' && typeof(document.body.style.MozAnimation) === 'undefined' && typeof(document.body.style.WebkitAnimation) === 'undefined' && typeof(document.body.style.OAnimation) === 'undefined') {
    $('.splash').fadeIn();
}

---

PS：这个技巧：

bottom:0；右：0在某些浏览器上可能会失败。
这里不是完全过时，但如果我不想使用Modernizer，我会这样做

可能有很多不同的方法可以做到这一点，但是

如果我试图针对特定版本的IE（不管CSS3如何），我只会使用IE条件注释

例如：

使用display设置淡入div的样式：none；在链接的条件注释CSS样式表中（即.CSS或任何您希望命名的名称）

淡入div将出现在所有浏览器中，除了特定的IE浏览器，您只需使用一点点CSS，就可以使用条件注释将其作为目标。解决方案简单，重量非常轻

有关条件注释的更多信息，请参见此处：

另外，如果您想了解更多关于CSS3可以在特定浏览器上使用的内容，请查看

它清楚地定义了特定浏览器（不仅仅是IE）可以使用和不能使用的内容。
问题中缺少CSS。我猜您从一开始就在使用
opacity:0
。。。因此，您需要设置不透明度：1如果浏览器是IE9或更低版本，请选中此@Karl AndréGagnon这允许我添加HTML类，我可以在CSS中修改这些类，但它可以直接更改CSS，即禁用动画吗？不需要现代化，可以检查属性。非常有趣的thx。关于这个的任何进一步的文档？不需要Modernizer，属性可以检查。你能用更多的代码更新你的答案吗，因为我不是JS方面的天才？正是当动画不受支持时，他的不透明度永远不会变为1，这是他的问题；）另外，仅供参考，我同意
bottom:0，但
右侧：0允许他使用
边距：自动将元素居中bottom:0非常重要，因为它也垂直居中！（刚刚了解到）更新后，我建议在旧浏览器上使用jquery制作动画。这可以用纯JS完成，但您还需要几行代码。优点：每个人都可以看到动画，moderns浏览器不需要加载更多脚本。