CSS animation to fade in and out at different rates with a pause

You can achive it with one css animation.

.el {
  width: 100px;
  height: 100px;
  background-color: green;
}

.fadeInOut {
    opacity: 0;
   -webkit-animation: fadeInOut 14s;
   animation: fadeInOut 14s;
  }

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    14% {
      opacity: 1;
    }
    
    86% {
        opacity: 1;
    }
  
    100 {
      opacity: 0;
    }
}

@-webkit-keyframe fadeInOut {
    0% {
        opacity: 0;
    }
    14% {
      opacity: 1;
    }
    
    86% {
        opacity: 1;
    }
  
    100 {
      opacity: 0;
    }
}

https://codepen.io/callmesupercookie/pen/xxOagdo

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top