使用modernizer，我怎样才能为css3动画提供回退，回退到flash？答案

【问题标题】：Using modernizer, how can I go about providing a fallback for css3 animation, falling back to flash?使用modernizer，我怎样才能为css3动画提供回退，回退到flash？
【发布时间】：2013-04-22 02:10:59
【问题描述】：

我是 Modernizer 的新手，如果不支持 css 动画并显示 Flash 副本，我不明白如何隐藏我的 css 动画。我知道我使用

if (Modernizer.cssanimation)

但不明白 if 语句中需要什么代码结构。

非常感谢

【问题讨论】：

标签： css html modernizr

【解决方案1】：

您不需要在 JavaScript 中执行此操作。您可以使用您的 CSS 代码。 Modernizr 将 css 类添加到 <html/> 标记以显示是否支持某个功能。对于动画，它是cssanimations。在modernizr完成他的工作之后，Firefox 20中的HTML标签看起来像

<html class=" js no-flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

假设你有一个容器，里面有一个 flash 对象：

<div id="container">
    <div id="flash">Here is the Flash animation</div><!-- <object .../> -->
    <div id="css">Here is the CSS animation</div>
</div>

然后您可以使用默认样式来为不支持 css 动画的浏览器显示 Flash 电影

#css {
    display: none;
}

并使用cssanimations 类覆盖样式以显示css 动画：

.cssanimations #flash {
    display: none;
}
.cssanimations #css {
    display: initial;
}

See this demo 并使用 IE8 或更低版本以及 Chrome 等兼容浏览器进行测试。 IE 显示“这是 Flash 动画”，而 Chrome 显示“这是 CSS 动画”。

当然，这仅在启用 JavaScript 时才有效。禁用 JavaScript 后，即使在现代浏览器中也能看到 Flash 动画。

【讨论】：