CSS 如何让一个元素淡入淡出？

Question

我可以通过以下 css:

将其 class 更改为 .elementToFadeInAndOut 来使不透明度为零的元素淡入

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

有没有一种方法可以通过为同一个 class 编辑 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>

阅读：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>

Answer 2

如果您需要单个 fadeIn/Out 而无需明确的用户操作（如 mouseover/mouseout），您可以使用 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 动画将运行仅一次（如果您需要多次重复此效果，请更改此值）

Answer 3

试试这个：

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

Answer 4

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

这是 csstricks 的摘要 post：

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

Answer 5

尝试为元素的不透明度属性创建关键帧动画：

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

    @keyframes example {
        from {opacity: 2;}
        to {opacity: 0;}
    }
</style>

<div>
    <p>[Element to fade]</p>
</div>

（您还可以设置动画的确切百分比以使其淡化 in/out。例如，将 0% 设置为 2 不透明度，将 50% 设置为 0 不透明度，将 100% 设置为 2 不透明度。好此方法的来源是 W3Schools @ https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)

CSS 如何让一个元素淡入淡出？

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

css

fadeout

fadein

css-transitions