Радиальный градиент для Internet Explorer

Я пытаюсь сделать анимацию с чистым css3. Анимация - это глаза, которые движутся влево-вправо, моя проблема заключается в том, что я использую радиальный градиентный фон для глаз, но в Internet Explorer этот эффект не работает, но в Chrome и Firefox он работает хорошо.Радиальный градиент для Internet Explorer

Вы можете посмотреть демо здесь: http://jsfiddle.net/h6VYd/

здесь код 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; } }

источник

2013-09-18 seb

С какой версией IE вы тестируете? (CSS градиенты были введены только в IE10, поэтому более ранние версии не будут работать) – Spudley

Я использую версию 10.0.9200.16686 ИЭ – seb

Вы должны добавить -ms-radial-gradient декларации CSS.

Например:

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

Вот рабочий jsFiddle.

источник

2013-09-19 07:26:26

([[ || ] [в ], |? В ,]? [, ] +) – b3wii

Это не работает на IE 11. Не могли бы вы обновить ответ, включив IE 11? – Rai

Радиальный градиент для Internet Explorer

ответ

Смежные вопросы