title: Radial gradient for Internet Explorer
body: <p>I am trying to do an animation with pure css3. The animation would be eyes that move left to right, my probleme is I using radial gradient background for the eyes but on Internet Explorer this effect doesn't look to work, but on Chrome and Firefox its working well.</p>
  
  <p>You can see a demo here : <a href="http://jsfiddle.net/h6VYd/" rel="nofollow">http://jsfiddle.net/h6VYd/</a></p>
  
  <p>here the css code :</p>
  
  <pre><code>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; } }
  </code></pre>