REACT/LESS/CSS3: Auto hiding message after 5s

App.js

 {alert.message && (
                  <div styleName={`alert ${alert.type}`}>
                    {alert.message.message}
                    {alert.message}
                  </div>
                )}

App.less

.alert {
  position: absolute;
  margin-top: -75px;
  flex: 0 0 100%;
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  animation: FadeAnimation 10s ease-in .2s forwards;
}

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #f2dede;
  text-align: center;
  font-size: 1.5em;
}

.alert-success {
  color: @black;
  background-color: @cisco-green;
  border-color: #f2dede;
  text-align: center;
  font-size: 1.5em;
}