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

CSS how to make an element fade in and then fade out?

提问by user95227

I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:

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

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

Is there a way I can make the element fade out after it fades in by editing css for this same class?

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

回答by Gildas.Tambo

Use css @keyframes

使用 css @keyframes

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


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

here is a DEMO

这是一个演示

.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>

Reading: Using CSS animations

阅读：使用 CSS 动画

You can clean the code by doing this:

您可以通过执行以下操作来清理代码：

.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>

回答by Fabrizio Calderan

If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW

如果您需要一个没有显式用户操作的淡入/淡出（如鼠标悬停/鼠标退出），您可以使用 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; }
}

By setting animation-fill-mode: forwardsthe animation will retain its last keyframe

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

By setting animation-iteration-count: 1the animation will run just once (change this value if you need to repeat the effect more than once)

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

回答by raksheetbhat

I found this link to be useful: css-tricks fade-in fade-out css.

我发现这个链接很有用：css-tricks 淡入淡出 css。

Here's a summary of the csstricks post:

这是csstricks帖子的摘要：

CSS classes:

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;
}

In React:

在反应中：

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>)
}

回答by Kwilver Bear

A way to do this would be to set the color of the element to black, and then fade to the color of the background like this:

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

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

@keyframes example {
from {color:black;}
to {color:white;}
}
</style>
<p>I am FADING!</p>

I hope this is what you needed!

我希望这是你需要的！

回答by Marin Popov

Try this:

尝试这个：

@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;
}