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

Question

我正在尝试使用 CSS 动画在 2 秒后淡入一个元素。该代码在新浏览器中运行良好，但在旧浏览器中，由于“opacity:0”，该元素将保持隐藏状态。

我希望它在旧浏览器中可见，但我不想涉及 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

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

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 2

因为除了 IE<10 之外的所有主流浏览器 support CSS3 animations，您都可以像这样在 HTML 中使用条件注释

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

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

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

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

Answer 3

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

#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 4

只是不要在元素本身上设置初始 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 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');
}

Answer 6

等待 3 秒，然后从左侧滑入：

更短：

.myclass {animation: 4s slidein;}

@keyframes slidein {
0% {opacity:0;
    transform: translateX(-100%);}
92% {opacity:0;
    transform: translateX(-100%);}
100% {opacity:1;
    transform: translateX 0;}
}

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

CSS animation with delay and opacity

css

animation

opacity