Transition property not working?

Question

css

Purpose: To create a Div block, when hovered over, another block with data and a table appears ...
Question: How to implement a smooth appearance of not only the block, but also the table separately?
Key point in css: .animatablichka.
Thanks in advance! ;)
Here is the code:

<style type="text/css">
.fonskart{
padding-top:80px;
width:920px;
height:600px;
background-image:url('http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/sams.jpg');
}
.punktikblok{
width:20px;
height:30px;
margin:0px 460px 0px 460px;
display:block;
position:relative;
transition-duration:1s;
}
.yarlik{
width:20px;
height:30px;
}
.descr{
    display: block;
    position: absolute;
    background: #ededed;
    color: #555;
    font-size: 14px;
    padding: 7px 20px;
    line-height: 18px;
    margin-top: 20px;
    opacity: 0;
    visibility: hidden;
width:250px;
height:200px;
    -webkit-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    -moz-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    -o-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
transition-duration:1s;
box-shadow:0px 0px 10px #E1E1E1;
}
.punktikblok:hover .descr {
   margin-top: 0;
        opacity: 1;
        visibility: visible;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
}
 .punktikblok_fixed .descr {
        pointer-events: none;
    }
    .punktikblok_fixed:hover .descr {
        pointer-events: auto;
    }
.kartinkavkvad{
width:80px;
height:80px;
float:right;
padding-top:0px;
margin-top:0px;
border-radius:10px;
}
.descr:hover .animatablichka{
width:150px;
transition-delay: 0s;
}
.animatablichka{
transition-duration:1s;
width:100px;
}
.tablichka{
float:left;
width:auto;
height:auto;
}
.blokdlyakartink{
float:right;
}</style>
<div class="fonskart">
  <div class="punktikblok">
    <div class="descr">
      <div style="width:auto; height:auto; border-bottom:3px solid #fff;margin-bottom:5px;">
        <span style="display: block; color:#444649; font-weight:bold; text-align:center;">КРОТИ</span></div>
      <div class="tablichka">
        <table class="animatablichka" style="padding: 5px; border: 1px solid rgb(51, 51, 51);">
          <tbody>
            <tr>
              <td>
                Площа, га</td>
              <td>
                5,5</td>
            </tr>
          </tbody>
        </table>
        <a href="#">Интересная ссылка</a></div>
      <div class="blokdlyakartink">
        <a><img class="kartinkavkvad" src="http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/kroti55.jpg" /></a></div>
    </div>
    <a href="#"><img class="yarlik" href="#" src="http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/small.png" /></a></div>
</div>

Answer 1

If the block should not take up space on the page, then display: none and visibility: hidden. On hover, return display and visibility. And write class names that are logical and in English without transliteration, and also do not use inline embedding styles unless absolutely necessary)