2013-03-22 4 views
0

Пожалуйста, помогите мне, я не вижу ошибки. Я все пробовал. Спасибо людям. Вы можете увидеть мой код по этой ссылке.CSS3 Анимация не будет работать в Opera и Firefox, но работает в Chrome и Safari

http://jsfiddle.net/astrogastro/dFZgn/

#sun{ 
    width: 500px; 
    height: 500px; 
    background: yellow; 
    background-image: url('img/sunmap.jpg'); 
    background-repeat: repeat-x; 
    background-position: center; 
    border-radius: 50%; 
    background-size:1000px; 
    animation-name:rotateSun; 
    animation-duration: 6s; 
    animation-iteration-count: infinite; 
    animation-timing-function:linear; 
    -o-animation-name:rotateSun; 
    -o-animation-duration: 6s; 
    -o-animation-iteration-count: infinite; 
    -o-animation-timing-function:linear; 
    -moz-animation-name:rotateSun; 
    -moz-animation-duration: 10s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function:linear; 
    -webkit-animation-name:rotateSun; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function:linear; 
    box-shadow: 0 0 7em #FFFF4D, 0 0 0.5em #FFFF4D, 0 0 0.3em #FFFF4D; 
    float: left; 
     } 

    @keyframes rotateSun{ 
    from {background-position-x:1px;} 
    to {background-position-x:1011px;} 
     } 


@-o-keyframes rotateSun{ 
    from{background-position-x:1px;} 
    to{background-position-x:1011px;} 
     } 

@-moz-keyframes rotateSun{ 
    from {background-position-x:1px;} 
    to {background-position-x:1011px;} 
     } 

@-webkit-keyframes rotateSun{ 
    from {background-position-x: 0px;} 
    to {background-position-x:1010px;} 
     } 

Таким образом, он работает pefectly в Safari, есть немного заморозка в Chrome, но это нормально. Моя анимация полностью мертва в Opera и Firefox. Есть идеи?

http://www.astrogastro.byethost24.com/

ответ

0

Вы должны префикс ваших @keyframes, а также анимация ...

1

Там нет стандартного background-position-x собственности (и, в частности, Firefox не поддерживает это нестандартную функцию).

+0

Спасибо! Я исправил свой код, как это, и он работает! @ -moz-keyframes rotateSun { \t от {background-position: 1px;} \t до {background-position: 1011px;} } –

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