Internet explorer Internet Explorer的径向梯度

我正在尝试用纯css3制作动画。动画应该是从左向右移动的眼睛，我的问题是我的眼睛使用径向渐变背景，但在Internet Explorer上，这种效果看起来不起作用，但在Chrome和Firefox上效果很好

您可以在此处看到演示：

下面是css代码：

body {

}

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-gradient(radial, 50% 40%, 0, 50% 40%, 100, color-stop(0%, #fcfcfc), color-stop(66%, #efeff1), color-stop(100%, #9b5050));
  background: -webkit-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
  background: -moz-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
  background: -o-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
  background: radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
}
.ball:after {
  content: "";
  position: absolute;
  top: 5%;
  left: 10%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 24, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(14%, rgba(255, 255, 255, 0.8)), color-stop(24%, rgba(255, 255, 255, 0)));
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  background: -moz-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  background: -o-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  background: radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
}

.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #208ab4), color-stop(30%, #6fbfff), color-stop(100%, #4381b2));
  background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  background: -moz-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  background: -o-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  background: radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -moz-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -ms-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -o-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
  -webkit-animation: move-eye-skew 5s ease-out infinite;
  -moz-animation: move-eye-skew 5s ease-out infinite;
  -o-animation: move-eye-skew 5s ease-out infinite;
  -ms-animation: move-eye-skew 5s ease-out infinite;
  animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
  content: "";
  display: block;
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 50%;
  top: 31.25%;
  left: 31.25%;
  background: black;
}
.iris:after {
  content: "";
  display: block;
  position: absolute;
  width: 31.25%;
  height: 31.25%;
  border-radius: 50%;
  top: 18.75%;
  left: 18.75%;
  background: rgba(255, 255, 255, 0.2);
}


.stage {
  width: 40px;
  height: 40px;
  display: inline-block;
}

@-moz-keyframes move-eye-skew {
  0% {
    -moz-transform: none;
    transform: none; }

  20% {
    -moz-transform: translateX(-10px) ;
    transform: translateX(-10px); }

  25%, 44% {
    -moz-transform: none;
    transform: none; }

  50%, 60% {
    -moz-transform: translateX(10px) ;
    transform: translateX(10px); }

  66%, 100% {
    -moz-transform: none;
    transform: none; } }

@-webkit-keyframes move-eye-skew {
  0% {
    -webkit-transform: none;
    transform: none; }

  20% {
    -webkit-transform: translateX(-10px) ;
    transform: translateX(-10px) ;}

  25%, 44% {
    -webkit-transform: none;
    transform: none; }

  50%, 60% {
    -webkit-transform: translateX(10px) ;
    transform: translateX(10px); }

  66%, 100% {
    -webkit-transform: none;
    transform: none; } }

@-o-keyframes move-eye-skew {
  0% {
    -o-transform: none;
    transform: none; }

  20% {
    -o-transform: translateX(-10px) ;
    transform: translateX(-10px); }

  25%, 44% {
    -o-transform: none;
    transform: none; }

  50%, 60% {
    -o-transform: translateX(10px);
    transform: translateX(10px); }

  66%, 100% {
    -o-transform: none;
    transform: none; } }

@-ms-keyframes move-eye-skew {
  0% {
    -ms-transform: none;
    transform: none; }

  20% {
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

  25%, 44% {
    -ms-transform: none;
    transform: none; }

  50%, 60% {
    -ms-transform: translateX(10px);
    transform: translateX(10px); }

  66%, 100% {
    -ms-transform: none;
    transform: none; } }

@keyframes move-eye-skew {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; }

  20% {
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    transform: translateX(-10px); }

  25%, 44% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; }

  50%, 60% {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px); }

  66%, 100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; } }

---

您需要添加

-ms radial gradient

CSS声明

例如：

background: -ms-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);

---

工作如下。

您需要添加

-ms径向渐变

CSS声明

例如：

background: -ms-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);

---

这是工作原理。

您正在使用哪个IE版本进行测试？（CSS渐变只在IE10中引入，所以早期版本不起作用）我使用的是IE10.0.9200.16686版本，您测试的是哪个IE版本？（CSS渐变只在IE10中引入，所以早期版本不起作用）我使用的是IE的10.0.9200.16686版本（[[||][at]，[124; at，]？[，]+），这在IE11上不起作用。请您更新答案以包括IE 11？（[[| |][at]？，[124; at，]？[，]+）这在IE 11上不起作用。请您更新答案以包含IE 11，好吗？