php - IE11 CSS动画问题

Question

我正在使用下面的 CSS 制作渐变滚动动画，它在 IE11 中的表现很好。 (我猜所有其他版本的 IE)

它在 Chrome 和 Firefox 中运行良好，尚未测试边缘，但我只是想知道是否有人知道这是否可能完全修复 IE11？

这似乎是剪辑不起作用。如何修改代码以兼容 IE 以及所有其他浏览器？

网站在这里 Link to Site

    .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”，将 -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