Is there a Way to apply transition animation to a [Display : none;] property [duplicate]

I'm trying to apply animation to a div that is suppose to be displayed if someone hover over an image..like the description of that images. i have managed to apply Block animation. like if i hover over the image, the animation works but as soon as i move my cursor away it is abrupt like it instantly collapse without any animation is there a way to apply an animation or transition to move it back to [Display:none;].

My html and css code is below, I can use Javascript too but only if I you can explain it like I should be able to grasp what happening in the script.. thanks in advance :)

I know I can use [visibility] property and make it hidden but that does not hide the div i have done multiple searches around google on multiple site but they usually use jQuery which I don't understand well and they assign the height or the width using pixels unit which I don't want to use because I'm trying to create a responsive page which won't change according to the screen size if i give it in px

Html markup:

<div class="Pro1">
    <img src="../Images/Products/Angel Electric.png" width="100%" height="Auto" alt="">
    <span class="txt">
      Some Description is suppose to show up for the bicycle if i Hover over the images :p
    </span>
  </div>

CSS

    .Pro1
    {
      width: 30%;
      margin: 0 2%;
      height: 100%;
      overflow: hidden;
      background-color: Grey;
    }
    .txt
    {
      display: none;
    }
    @-webkit-keyframes slide-down
    {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }
      100% { opacity: 1; -webkit-transform: translateY(0); }
    }
    @-moz-keyframes slide-down
    {
          0% { opacity: 0; -moz-transform: translateY(-100%); }
        100% { opacity: 1; -moz-transform: translateY(0); }
    }
    .Pro1:hover .txt
    {
      display: block;
      -webkit-animation: slide-down .5s ease-out;
      -moz-animation: slide-down .5s ease-out;
    }