CSS如何使元素淡入然后淡出？

Posted 2023-03-06

【中文标题】CSS如何使元素淡入然后淡出？

【英文标题】：CSS how to make an element fade in and then fade out?

【发布时间】：2015-07-19 11:31:43

【问题描述】：

我可以通过使用以下 css 将其类更改为 .elementToFadeInAndOut 来使不透明度为零的元素淡入：

.elementToFadeInAndOut 
    opacity: 1;
    transition: opacity 2s linear;

有没有一种方法可以通过编辑同一类的 css 使元素在淡入后淡出？

【问题讨论】：

使用此链接中定义的 css 来切换所需元素的淡入和淡出类：css-tricks.com/snippets/css/…

【参考方案1】：

如果您需要单个淡入/淡出而无需明确的用户操作（如鼠标悬停/鼠标移出），您可以使用 CSS3 animation: http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut 

    animation: fadeinout 4s linear 1 forwards;




@keyframes fadeinout 
  0%  opacity: 0; 
  50%  opacity: 1; 
  100%  opacity: 0; 

通过设置animation-fill-mode: forwards，动画将保留其最后一个关键帧

通过设置animation-iteration-count: 1，动画将只运行一次（如果您需要多次重复效果，请更改此值）

【讨论】：

真的需要-webkit- 吗？

不是 2020 年，而是 2015 年

【参考方案2】：

这样做的一种方法是将元素的颜色设置为黑色，然后像这样淡入背景颜色：

<style> 
p 
animation-name: example;
animation-duration: 2s;


@keyframes example 
from color:black;
to color:white;

</style>
<p>I am FADING!</p>

我希望这是你需要的！

【讨论】：

这不会淡出。

我已经删除了我的反对票，但我不知道我是否会将原始帖子称为错误；通过从 display（不能动画或过渡）更改为 color（可以动画/过渡）[并且同样重要的是，添加了持续时间]，你已经从根本上改变了答案。

【参考方案3】：

我发现这个链接很有用：css-tricks fade-in fade-out css。

以下是 csstricks 帖子的摘要：

CSS 类：

.m-fadeOut 
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;

.m-fadeIn 
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;

在反应中：

toggle()
    if(true condition)
        this.setState(toggleClass: "m-fadeIn");
    else
        this.setState(toggleClass: "m-fadeOut");
    


render()
    return (<div className=this.state.toggleClass>Element to be toggled</div>)

【讨论】：

可见性的不同延迟偏移值是这里的关键。谢谢

这应该是最佳答案，因为这使得元素在淡出后实际上隐藏了。

【参考方案4】：

使用 css @keyframes

.elementToFadeInAndOut 
    opacity: 1;
    animation: fade 2s linear;



@keyframes fade 
  0%,100%  opacity: 0 
  50%  opacity: 1 

这是一个演示

.elementToFadeInAndOut 
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;


@-webkit-keyframes fadeinout 
  0%,100%  opacity: 0; 
  50%  opacity: 1; 


@keyframes fadeinout 
  0%,100%  opacity: 0; 
  50%  opacity: 1; 

<div class=elementToFadeInAndOut></div>

阅读：Using CSS animations

你可以这样清理代码：

.elementToFadeInAndOut 
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;


@-webkit-keyframes fadeinout 
  50%  opacity: 1; 


@keyframes fadeinout 
  50%  opacity: 1; 

<div class=elementToFadeInAndOut></div>

【讨论】：

添加 forwards 使元素在淡入淡出完成其循环后保持隐藏。太棒了。

请帮忙解决这个问题？ ***.com/questions/61203327/…

【参考方案5】：

试试这个：

@keyframes animationName 
  0%    opacity:0; 
  50%   opacity:1; 
  100%  opacity:0; 

@-o-keyframes animationName
  0%    opacity:0; 
  50%   opacity:1; 
  100%  opacity:0; 

@-moz-keyframes animationName
  0%    opacity:0; 
  50%   opacity:1; 
  100%  opacity:0; 

@-webkit-keyframes animationName
  0%    opacity:0; 
  50%   opacity:1; 
  100%  opacity:0; 
   
.elementToFadeInAndOut 
   -webkit-animation: animationName 5s infinite;
   -moz-animation: animationName 5s infinite;
   -o-animation: animationName 5s infinite;
    animation: animationName 5s infinite;