纯粹使用CSS过渡隐藏元素和淡化它们的最可靠方法是什么？

Question

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

Answer 1

与往常一样，您的问题是旧版本的IE http://caniuse.com/#feat=css-animation

我是渐进增强的忠实信徒，只处理CSS。

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

幸运的是，我们可以安全地让旧浏览器忽略动画中的淡入淡出。只需将1的不透明度设置为您要淡入的默认div，并在不透明度设置为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/