Question

我尝试使用CSS动画在2秒后淡入元素。该代码在新浏览器中运行良好，但在旧浏览器中，元素将保持隐藏，因为＆＃34;不透明度：0＆＃34;。

我希望它在旧版浏览器中可见，我不想要使用javascript。可以用CSS解决吗？例如。一些目标浏览器如何不支持动画？

CSS：

#element{
animation:1s ease 2s normal forwards 1 fadein;
-webkit-animation:1s ease 2s normal forwards 1 fadein;
opacity:0
}

@keyframes fadein{from{opacity:0}
to{opacity:1}
}

@-webkit-keyframes fadein{from{opacity:0}
to{opacity:1}
}

HTML：

<div id=element>som content</div>

Answer 1

不要在元素本身设置初始opacity，将其设置在@keyframes：

中

#element{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

此技术将动画延迟，以便立即开始运行。然而，在动画中大约66％之前，不透明度确实不会发生变化。因为动画运行3秒钟，它会产生延迟2秒的效果，并淡入1秒钟。

请参阅此处的工作示例：https://jsfiddle.net/75mhnaLt/

您可能还想查看对旧浏览器使用条件注释; IE8和IE9。

HTML 中的以下内容：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->

然后您可以执行以下操作：

.lt-ie9 #element {
    opacity: 1;
}

Answer 2

我建议您将元素的opacity设置为默认值为1（对于不支持动画的浏览器）。然后在0开始动画并使用关键帧延迟动画。

#element{
animation:3s ease 0s normal forwards 1 fadein;
-webkit-animation:3s ease 0s normal forwards 1 fadein;
opacity:1
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

http://jsfiddle.net/mg00t86v/2/

Answer 3

由于所有主要浏览器support CSS3 animations都有明显的IE<10例外，您可以在HTML中使用条件注释

<!DOCTYPE html>
<!--[if lte IE 9]><html class="lte-ie9"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html><!--<![endif]-->

因此，您可以使用特定选择器中的IE<10类名为.lte-ie9添加更具体的规则

.lte-ie9 #element {
   opacity: 1;
   filter : alpha(opacity=100);
}

我不会移动第一个关键帧内的opacity: 0作为主要建议，因为这会限制所有动画的animation-delay等于0（否则你可以看一下 fouc 的元素本身）

Answer 4

你可以尝试这可能对你有帮助。

<强> HTML

<div>some text</div>

<强> CSS

div{
-webkit-animation: fadein 5s linear 1 normal forwards;
 }

@-webkit-keyframes fadein{
from{
   opacity: 0;
}
to{
    opacity: 1;
}
}

Answer 5

我有一个类似的问题，要求先等待n秒，然后才能逐渐淡入不同的页面元素。

让该功能对我有用的关键，在其他任何答案中都没有提到，animation实际上可以运行动画列表。它将同时开始运行它们，因此您需要插入延迟以便按顺序运行它们。

我的解决方案是这样的（在SCSS中，但足够简单，可以根据需要编写为纯CSS）：

@mixin fade-in($waitTime) {
    animation: 
        wait #{$waitTime},
        fade-in 800ms #{$waitTime};
}

@keyframes wait {
    0% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

用法：

h1 {
    @include fade-in('500ms');
}
h2 {
    @include fade-in('700ms');
}

具有延迟和不透明度的CSS动画

5 个答案: