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

【问题标题】：CSS animation with delay and opacity具有延迟和不透明度的 CSS 动画
【发布时间】：2015-07-02 23:35:50
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： css animation opacity

【解决方案1】：

我遇到了类似的问题，要求是等待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');
}

【讨论】：

【解决方案2】：

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

您可能还想看看在旧浏览器中使用条件 cmets； 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;
}

【讨论】：

删除opacity: 0 就像@Michael Giovanni Pumo 所说的那样，但是不是时间拉伸将延迟合并到时间线中，只需应用animation-fill-mode: backwards 将延迟应用于第一个关键帧（又名'从'状态）。注意：如果您的结束关键帧在动画中做了一些独特的事情，那么您将需要使用animation-fill-mode: both。 jsfiddle.net/m3z2htLe
用这种方法动画缓动效果不会和预期的一样吧？

【解决方案3】：

由于所有主要浏览器 support CSS3 animations 除了 IE<10 之外，您都可以像这样在 HTML 中使用条件 cmets

<!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 用于元素本身）

【讨论】：

【解决方案4】：

我建议您将元素的 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/

【讨论】：

【解决方案5】：

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

HTML

<div>some text</div>

CSS

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

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

【讨论】：