JSFiddle - React, Tailwind, and code Playground

HTML

<p id="element">P IS SHOWN</p>

CSS

#element {
  padding: 50px;
  background: red;
  color: white;
}

#element {
    -moz-animation: cssAnimation 6s ease-in;
    /* Firefox */
    -webkit-animation: cssAnimation 6s ease-in;
    /* Safari and Chrome */
    -o-animation: cssAnimation 6s ease-in;
    /* Opera */
    animation: cssAnimation 6s ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
  0%   {opacity: 0;display:none;}
  /* 2 sec : start fading in*/
  30%   {opacity: 0;display:block;}
  /* 2.5 sec : visible */
  40%   {opacity: 1;display:block;}
  /* 4.5 sec : start fading out */
  70%   {opacity: 1;display:block;}
  /* 5 sec : not visible */
  80%   {opacity: 0;display:block;}
  /* 6 sec */
  100%   {opacity: 0;display:none;}
}
@-webkit-keyframes cssAnimation {
  0%   {opacity: 0;display:none;}
  /* 2 sec : start fading in*/
  30%   {opacity: 0;display:block;}
  /* 2.5 sec : visible */
  40%   {opacity: 1;display:block;}
  /* 4.5 sec : start fading out */
  70%   {opacity: 1;display:block;}
  /* 5 sec : not visible */
  80%   {opacity: 0;display:block;}
  /* 6 sec */
  100%   {opacity: 0;display:none;}
}