<div id='bg'>
  <h1>Example</h1>
</div>

body{
  margin: 0;
  padding: 0;
}
#bg{
  height: 100vh;
  background-color: white;
  opacity: 1;
}
#bg:hover{
  
  opacity: 1;
  animation-duration: 2s;
  animation-name: changebg;
    
}
#bg:hover h1{
  color: white
}
@keyframes changebg {
  from {
     opacity: 1;
  }
 50% {
    opacity: 0.5;
  background: #ccc  url("https://image.shutterstock.com/image-photo/old-brick-black-color-wall-600w-1605128917.jpg") repeat fixed center;
  }
  to {
     opacity: 1;
      background: #ccc  url("https://image.shutterstock.com/image-photo/old-brick-black-color-wall-600w-1605128917.jpg") repeat fixed center;
  }
}

const element = document.getElementById("bg");

element.addEventListener("animationend", animationend, false);
function animationend(){
  
  element.style.background = '#ccc  url("https://image.shutterstock.com/image-photo/old-brick-black-color-wall-600w-1605128917.jpg") repeat fixed center'
}