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

Question

通过使用以下css将其类更改为.elementToFadeInAndOut,我可以创建一个不透明度为零的元素:

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

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

非常感谢您的宝贵时间.

Answer 1

使用css @keyframes

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


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

这是一个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>

阅读:使用CSS动画

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

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

Answer 2

如果您需要一个没有明确用户操作(如鼠标悬停/鼠标移动)的单个淡入/淡出,您可以使用CSS3 animation:http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut {
    -webkit-animation: fadeinout 4s linear 1 forwards;
    animation: fadeinout 4s linear 1 forwards;
}

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

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

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

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

Answer 3

我发现这个链接很有用：css-tricks 淡入淡出 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>)
}