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

Question

页面加载时，我在主容器上有一个淡入动画。
可以在所有期望IE（9）的浏览器上正常工作。

有没有一种方法可以检测用户是否正在使用与CSS3动画不兼容的浏览器，然后禁用它们，以便他们可以查看页面？

的HTML

<body>

    <span id="splash-title">
    <img src="kuntosali/images/fc_yrityskeskus.png" class="pure-img" id="splash-logo" alt="logo" />
    <img src="kuntosali/images/loading.gif" id="loading" alt="loading" />
    </span>

<div class="splash-container">
    <div class="splash">
        <span class="splash-head"></span>
        <p class="splash-subhead">
            <span>FoxCenter</span> on kuntosali ja yrityskeskus.<br>
            Kumpaa etsit?
        </p>
        <p>
            <a href="yrityskeskus/" class="pure-button pure-button-primary">Yrityskeskus</a>
            <a href="kuntosali/" class="pure-button pure-button-primary">Kuntosali
            </a>
        </p>
    </div>
</div>


</body>

的CSS

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
        -webkit-animation: fade-in 2s forwards 4s;
        -moz-animation: fade-in 2s forwards 4s;
        -o-animation: fade-in 2s forwards 4s;
    animation: fade-in 2s forwards 4s;
}

Answer 1

正如@Karl-AndréGagnon所指出的那样，使用modernizr可能是最干净的方法。 当浏览器无法使用CSS3动画时， no-cssanimations在<html>标记中添加no-cssanimations类。

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

在CSS中，您将执行.no-cssanimations .splash { /* ...do something */ }
在javascript中，您可以执行以下操作：

if( Modernizr.cssanimations ){ /* ...do something */ }

if( $(".no-cssanimations").length ){ /* ...do something */ }

资源资源

http://modernizr.com/
Modernizr开发版本： http : //modernizr.com/downloads/modernizr-latest.js
Modernizr自定义版本（适用于产品）： http : //modernizr.com/download/

Answer 2

您应该查看Modernizr ，它是一个功能检测库。

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

这将使您可以访问javascript中的Modernizr对象，还可以将类添加到HTML标记（如果选择了该选项）。

在CSS中：

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

或使用Javascript：

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

希望有帮助:)

Answer 3

如果不支持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; right: 0; bottom: 0; right: 0; 在某些浏览器上可能会失败。

Answer 4

这里不要完全过时，但是如果我不想使用Modernizr，这就是我要做的。

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

如果我要针对特定版本的IE（无论CSS3如何）定位目标，我只会使用IE条件注释。

例如：

使用display：none设置淡入div的样式。 在附带条件的带注释的CSS样式表中（例如，css或任何您想要命名的样式）。

该渐入式div会出现在所有浏览器中，除了您仅需使用少量CSS即可使用条件注释定位的特定IE浏览器。 简单的解决方案，非常轻巧。

在此处查看有关条件注释的更多信息： http : //css-tricks.com/how-to-create-an-ie-only-stylesheet/

另外，如果您想进一步了解特定浏览器可以使用哪些CSS3，请访问http://caniuse.com/。

它清楚地定义了您可以和不能用于特定浏览器（不仅限于IE）的功能。

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

问题描述

的HTML

的CSS

4 个解决方案

解决方案1
1 2014-10-27 13:04:58

解决方案2
1 2014-10-27 13:05:14

解决方案3
0 2014-10-27 13:06:03

解决方案4
0 2014-10-28 19:10:43

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

问题描述

的HTML

的CSS

4 个解决方案

解决方案1 1 2014-10-27 13:04:58

解决方案2 1 2014-10-27 13:05:14

解决方案3 0 2014-10-27 13:06:03

解决方案4 0 2014-10-28 19:10:43

解决方案1
1 2014-10-27 13:04:58

解决方案2
1 2014-10-27 13:05:14

解决方案3
0 2014-10-27 13:06:03

解决方案4
0 2014-10-28 19:10:43