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

发布于05月08日

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

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

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

推荐答案

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

阅读: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; }
}