2012-04-07 2 views
2

Я создал простую анимацию, чтобы отображать изображение на веб-сайте с использованием свойств webkit и CSS3.CSS3 анимации, не работающие в IE или Opera

Здесь стиль CSS (это только в своей работе применяет дивы)

.bg { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display:block; 
    -webkit-animation: spin 100s infinite linear; 
    -moz-animation: spin 100s infinite linear; 
    -o-animation: spin 100s infinite linear; 
    -ms-animation: spin 100s infinite linear; 
    opacity:0.8; 
    filter:alpha(opacity=80); /* For IE8 and earlier */ 
    z-index:-1; 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg);} 
    100% { -webkit-transform: rotate(360deg);} 
} 
@-moz-keyframes spin { 
    0% { -moz-transform: rotate(0deg);} 
    100% { -moz-transform: rotate(360deg);} 
} 
@-o-keyframes spin { 
    0% { -o-transform: rotate(0deg);} 
    100% { -o-transform: rotate(360deg);} 
} 
@-ms-keyframes spin { 
    0% { -ms-transform: rotate(0deg);} 
    100% { -ms-transform: rotate(360deg);} 
} 

Теперь результат в том, что на Mozilla Firefox, Chrome и Safari, он работает без проблем, но в Opera и Internet исследователь не могу см. любую анимацию.

ответ

6

http://caniuse.com/#feat=css-animation

IE10 и Opera поддержка 12 CSS анимации. Не ранее.

+0

Привет Я использую последнюю версию Opera, загруженную в соответствии с тестированием –

+0

Самая последняя стабильная версия Opera - 11.62, и вам нужна новая версия версии 12 для тестирования анимаций (поскольку они реализованы только 2 недели назад - http: //my.opera.com/desktopteam/blog/2012/03/26/html5-css-64bit). Предупреждение: эта сборка крайне нестабильна. Думаю, вам нужно подождать месяц или около того. – c69

+1

@ AntonioColella Я только что [скачал] (http://www.opera.com/browser/next/) и [проверен] (http://jsfiddle.net/9pQgB/) Opera 12 и анимации с ключевыми кадрами ** ** поддерживаются. –

0

Может быть, эта информация будет полезна для некоторых, кто имеют проблемы с анимацией в Opera 12.

В опере 12.x CSS свойство анимации «бесконечный» не работает для меня. Анимация была заселена только один раз, а затем остановлена. Но после того, как я изменил целочисленное значение длительности (например, 1s) на дробное значение (например, 1.1s), анимация начала играть бесконечно.

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