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

小编典典

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

css

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

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

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

阅读 1328

2020-05-16

共1个答案

小编典典

使用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>

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

2020-05-16