IE 11和IE Edge中未显示CSS3动画

Question

我创建了一个CSS背景动画，该动画在Chrome和Firefox中可以正常工作，但在IE Edge和IE 11中，只有背景颜色可以动画。在Safari中，只有左上角的图像会动画。我不确定是什么问题。我的代码在下面，我的JS Fiddler示例是https://jsfiddle.net/3vq7L9g2/

我更新了代码，但仍然无法正常工作

<div class="my-group">

</div>


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

    to {

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

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


    @-moz-keyframes animatedBackgroundto {

       from {

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

       to {

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





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


    @-webkit-keyframes animatedBackgroundto {

       from {

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

       to {

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






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


    @-o-keyframes animatedBackgroundto {

       from {

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

       to {

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

Answer 1

GSAP（绿色袜子动画平台）就是为这种情况而设计的。

您可以使用Timelinelight通过一些js代码来解决此问题。 https://greensock.com/docs/TimelineLite

Answer 2

我知道了。当我定义背景图像时，背景位置背景会在动画的div中重复，而不仅仅是调用动画名称，这可以解决此问题。现在，我的动画可以在IE 11，IE Edge和Safari中运行

target