csscss-transitionsfadeinfadeout

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

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?

Solution

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