react-js-banner/src/banner.css

React JS Banner component customizable with auto hide option

@keyframes opacityOn {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes noFadeOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.banner{
  background-color: orange;
  text-align: center;
  padding: 10px 10px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  align-items: center;
  justify-content: center;
  animation: opacityOn 5s normal forwards;
}

.banner-transition-appear {
  opacity: 0.01;
}

.banner-transition-appear.banner-transition-appear-active {
  opacity: 1;
  transition: opacity 2s ease;
}

.banner-transition-leave {
  opacity: 1;
}

.banner-transition-leave.banner-transition-leave-active {
  opacity: 0.01;
  transition: opacity 2s ease;
}