IE11 CSS-проблема с анимацией

Question

IE11 CSS-проблема с анимацией

Я использую приведенный ниже CSS для создания анимации с градиентной прокруткой, и в IE11 она отлично работает. (И я предполагаю, что все другие версии IE)

Он отлично работает в Chrome и Firefox, еще не тестировал Edge, но мне просто интересно, кто-нибудь знает, можно ли вообще это исправить для IE11?

Кажется, что отсечение не работает. Как изменить код, чтобы он был совместим с IE, а также со всеми другими браузерами?

сайт здесь Ссылка на сайт

    .elementor-icon .fa:before {
background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
background-size: 400% 400%;
animation: BackgroundGradient 10s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@keyframes BackgroundGradient {
0% {background-position: 0% 50%!important;}
50% {background-position: 100% 50%!important;}
100% {background-position: 0% 50%!important;}
}

0

animation css html php wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете использовать этот маленький запасной «хак», добавить -webkit- к линейному градиенту (есть также строка для Opera, но я не пробовал):

.elementor-icon .fa:before {
background: -webkit-linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
background: -o-linear-gradient(transparent, transparent);
background-size: 400% 400%;
animation: BackgroundGradient 10s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@keyframes BackgroundGradient {
0% {background-position: 0% 50%!important;}
50% {background-position: 100% 50%!important;}
100% {background-position: 0% 50%!important;}
}

Поскольку IE не поддерживает префикс webkit, а Edge поддерживает, все выглядит хорошо.

Вдохновленный этой статьей: http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

0