CSS如何使元素淡入，然后淡出？ [英] CSS how to make an element fade in and then fade out?

问题描述

我可以使一个元素的不透明度为零淡入，通过改变它的类为.elementToFadeInAndOut与以下css：

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

有一种方法可以使元素在淡入后淡出

解决方案

div>

使用css @keyframes

  .elementToFadeInAndOut {
 opacity：1; 
 animation：fade 2s linear; 
} 
 
 
 @keyframes fade {
 0％，100％{opacity：0} 
 50％{opacity：1} 
 } 
  

这里是一个DEMO

div class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  .elementToFadeInAndOut {width：200px; height：200px;背景：红色; -webkit-animation：fadeinout 4s线性前进;动画：fadeinout 4s线性向前;} @  -  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;背景：红色; -webkit-animation：fadeinout 4s线性前进;动画：fadeinout 4s线性前进; opacity：0;} @  -  webkit-keyframes fadeinout {50％{opacity：1; }} @ keyframes fadeinout {50％{opacity：1; }}  

 < div class = elementToFadeInAndOut& div>  

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

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

Thank you very much for your time.

解决方案

Use 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

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>

这篇关于CSS如何使元素淡入，然后淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！