CSS multiple backgrounds

HTML

<div class="my-group">

</div>

CSS

div {
  width: 500px;
  height: 300px;
}



     .my-group {

   animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
       -webkit-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        -moz-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        -o-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        background-repeat: no-repeat;
        animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
                -webkit-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        -moz-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        background-repeat: no-repeat;
    }


    .my-group:hover {
         animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
       -webkit-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        -moz-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        -o-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
        background-repeat: no-repeat;

        animation: animatedBackgroundto 0.3s ease-in-out forwards;
        -webkit-animation: animatedBackgroundto 0.3s ease-in-out forwards;
        -moz-animation: animatedBackgroundto 0.3s ease-in-out forwards;
        background-repeat: no-repeat;

    }



@keyframes animatedBackgroundfrom {
   from {
     
       background-image:
       url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat;
       background-color: #fbaf5d;
   }
        
   to {
     
     background-image:
     url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat;
     background-color: #448ccb;
     }
   }


@keyframes animatedBackgroundto {
   
   from {
    
     background-image:
     url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat;
     background-color: #448ccb;
   }
        
   to {
     
     background-image:
     ...