Unable to get the desired animation

Question

I'm trying to zoom in and zoom out animation using css for preloader but unable to get the desired result

#preloader{
    background: black;
    background-repeat:no-repeat;
    background-size: cover;
    background-position:center;
    width:100%;
    height:100%;
    z-index:20;
    opacity:1;
    position:fixed;
  }
#preloader>section{
    position:absolute;
    height:250px;
    width:300px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:url('/img/cropped-Dark-roads-no-more-300x151-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: center;
}
.preloader-img{
    animation:zoomlight 1s ease-in-out infinite;
}
@keyframes zoomlight{
    0%{
        opacity:0.3;
    }
    50%{
        opacity:1;
        filter:drop-shadow(1em 1em 2em white)
    }
    100%{
    }

}

to get a zoom in effect in preloader usuing transform:scale but the effect is not working

---