IE11 CSS动画问题

Question

我正在使用下面的CSS做一个梯度滚动动画，它是很好地分开形式在IE11。(我猜所有其他版本的IE)

它在Chrome和Firefox中运行得很好，还没有经过边缘测试，但我只是想知道是否有人知道这是否有可能修复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;}
}

Answer 1

您可以在线性梯度中使用这个小回退"hack"，add (也有一个用于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