css content property transition in animation keyframe

Question

I have this simple animation css, and it works fine except for the content URL, I want a smooth transition when changing the content URL, but what I get is like 0 1 there is no transition in the content URL

I hope anyone can help me, thank you all

         body::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
}

body {
    overflow-y: scroll;
}

-moz-body::-scrollbar {
    width: 0;
    background-color: transparent;
}
-ms-body::-scrollbar {
    width: 0;
    background-color: transparent;
}
@keyframes img1 {
    0.00%  {bottom: 50%; left: 50%;width: 50%; height: 50%;transform: translate(-50%, 50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);border-radius:0 0 0 0;content: url(https://www.imgacademy.com/sites/default/files/2009-stadium-about.jpg);opacity:10}
    100.00%  {bottom: 50%; left: 50%;width: 50%; height: 50%;transform: translate(-50%, 50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);border-radius:0 0 0 0;content: url(https://i.stack.imgur.com/2b4pE.jpg?s=64&g=1);opacity:10}
}#newImgID1{animation: img1 2s infinite;
 animation-fill-mode: forwards;}