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

Posted 2023-03-06

技术标签:

【中文标题】具有延迟和不透明度的 CSS 动画【英文标题】：CSS animation with delay and opacity 【发布时间】：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 fadeinfromopacity:0
toopacity:1


@-webkit-keyframes fadeinfromopacity:0
toopacity:1

HTML：

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

【问题讨论】：

【参考方案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;

【讨论】：

以上是关于具有延迟和不透明度的 CSS 动画的主要内容，如果未能解决你的问题，请参考以下文章