css - 隐藏元素并完全使用 CSS 过渡淡入淡出的最可靠方法是什么？

Question

我想在页面加载时隐藏一个 HTML 元素，然后使用 CSS 过渡将其淡入。我的计划是将不透明度设置为 0，然后使用 CSS 动画将其转换为 1。但我担心内容会隐藏在无法处理 CSS 转换的旧浏览器中。有没有更安全的方式来隐藏内容？或者从无法处理的浏览器中排除此代码？

Answer 1

一如既往，您的问题出在旧版本的 IE 上。
http://caniuse.com/#feat=css-animation

我坚信渐进式增强和仅处理 CSS。

使用 Javascript 可以为旧版浏览器提供回退或使用像 Modernizr 这样的库但我讨厌这些解决方案，它们有自己的问题。如果访问者禁用了 JS 怎么办？

幸运的是，我们可以安全地让旧版浏览器忽略淡入动画。只需将要淡入的默认 div 的不透明度设置为 1，然后在不透明度设置为 0 时开始关键帧动画。

div {
    height: 300px;
    width: 300px;
    background-color: red;
    opacity: 1;
    animation: fadeIn 7s ease infinite;
 }
@keyframes fadeIn {
     0% { opacity: 0; }
     50% { opacity: 1; }
     100% { opacity: 0; }
}

https://jsfiddle.net/3rzL0xz8/