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>类。

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

，您将.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自定义构建（针对prod）：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;可能在某些浏览器上失败。

Answer 4

这里不要完全过时，但如果我不想使用Modernizr，我会怎样做。

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

如果我试图针对特定版本的IE（无论CSS3），我只会使用IE条件评论。

例如：

使用display：none设置淡入div的样式;在链接条件评论的CSS样式表（ie.css或你想要命名的任何内容）中。

淡入div将出现在所有浏览器中，除了您使用一小部分CSS通过条件注释定位的特定IE浏览器。简单的解决方案，非常轻巧。

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

另外，如果您想了解更多关于CSS3在特定浏览器上可以使用的信息，请查看http://caniuse.com/

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

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

HTML

CSS

4 个答案: