why animation can be reusable after im changing elemets display property with js

can some one explain i couldnt find any answer for this

can someone explain me this

my codes downbelow

`

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      aside {
        display: none;
        position: relative;
        left: -100%;
        height: 100vh;
        background-color: red;
        width: 20%;
        animation: openit 800ms ease-in forwards ;
      }
      @keyframes openit {
        to{
            left: 0;
        }
      }
      aside a {
        display: block;
      }
      .open {
        position: absolute;
        z-index: -1;
      }
    </style>
  
   
  

`

CodePudding user response：

I found this: When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work. form this link. I hope this help.