JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div>
  <span>1</span>
</div>

CSS

div {
  width: 100px;
  height: 200px;
}

span {
  display: none;
  width: 100px;
  height: 200px;
  background-color: #ccc;
  opacity: 0;;
}

div:hover span {
  display: block;
  щз 
  animation: .1s linear slidein;
  animation-delay: .4s;
}

@keyframes slidein {
  from { 
    display: none;
    opacity: 0;
  }
  to {
    display: block;
    opacity: 1;
    }
}

@-webkit-keyframes slidein {
  from { 
    display: none;
    opacity: 0;
  }
  to {
    display: block;
    opacity: 1;
    }
}