CSS multiple backgrounds

by jimmyt1001

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;
    }


    .my-group:hover {

        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;
        -o-animation: animatedBackgroundto 0.3s ease-in-out forwards;
        background-repeat: no-repeat;

    }



@keyframes animatedBackgroundfrom {
   from {
     
       background:
       url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
       url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
       url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
       url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
       background-color: #fbaf5d;
   }
        
   to {
     
     background:
     url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
     url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
     url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
     url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
     background-color: #448ccb;
     }
   }


@keyframes animatedBackgroundto {
   
   from {
    
     background:
     url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1%...