Image animation with CSS – slow fade in

/* add this class to image container */
.home-hero{
background-image: url(‘/wp-content/uploads/2024/01/porsche-road.webp’);
background-size:cover;
background-position: 0 0;
-webkit-animation: slidein 20s;
animation: slidein 20s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: alternate;
animation-direction: alternate;
overflow:hidden;
animation-fill-mode: forwards;
animation-delay: 1s;
}

@-webkit-keyframes slidein {
from {background-position: 0 0;background-size:100%; }
to {background-position: -300px 0; background-size:120%;}
}

@keyframes slidein {
from {background-position: 0 0;background-size:100%; }
to {background-position: -300px -100px; background-size:120%;}
}