CSS3-анимация не отображается в IE 11 и IE Edge

Я создал фоновую анимацию 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;
         }
       }

Является ли определение ключевого кадра внутри медиа-запроса, значит, есть известная ошибка? caniuse.com/#search=Keyframe

— 23.08.2018 22:37

Источник фонового изображения не является анимируемым свойством в IE-Edge

— 23.08.2018 22:58

html css css-animations

23.08.2018 21:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

163

Ответы 2

GSAP (платформа анимации зеленых носков) предназначена для таких ситуаций.

Вы можете использовать Timelinelight для решения этой проблемы, используя немного кода js. https://greensock.com/docs/TimelineLite

24.08.2018 03:34

Я понял. Когда я определил фоновое изображение, положение фона Повторение фона в div, который анимирует, вместо простого вызова имени анимации, это устранило проблему. Теперь моя анимация работает в IE 11, IE Edge и Safari.

 .my-group {

background-image:
    url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg),
    url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg),
    url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg),
    url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg);
    background-position: -6% -2%, 109% -2%, -6% 100%, 104% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards;
    -moz-animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards;
    -webkit-animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards;
    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;
 }

}

28.08.2018 16:38

Другие вопросы по теме

Пункты меню после кнопки бургера, расположенной слишком близко к бургеру

Лучший способ сохранить данные javascript в localstorage

Адаптивная навигационная панель с использованием гибкости не сворачивается

Динамическое создание таблицы со столбцами фиксированной ширины с использованием Angular

Шрифт страницы github и index.html не работают

Как сделать так, чтобы элемент отображался только при наличии полосы прокрутки?

Как сделать сетку из 7 столбцов в Materialise CSS?

Python-Sphinx: установка шрифта тела текста

ЭМ по сравнению с РЗМ по структурному содержанию

Flexbox / CSS / Адаптивные изображения веб-дизайна

CSS3-анимация не отображается в IE 11 и IE Edge

Ответы 2

Другие вопросы по теме

Похожие вопросы