2017-02-08 9 views
1

У меня есть анимация CSS, с которой я сталкиваюсь, я не вижу проблемы. Есть две части: сначала «выцветать», а затем «двигаться». Часть, которая не работает, - это анимация «move». Удивительно, но полная анимация работает в Microsoft Edge, но не работает в любом другом браузере, например, в Chrome, Firefox и Opera. Может ли кто-нибудь сказать мне, где я ошибся?CSS Анимация работает только в Edge

#about { 
visibility: hidden; 
    -webkit-animation: fadein1 .5s, move1 .5s; 
     -moz-animation: fadein1 .5s, move1 .5s; 
     -o-animation: fadein1 .5s, move1 .5s; 
} 

#about.open { 
visibility: visible; 
     -webkit-animation: fadein .5s, move .5s; 
     -moz-animation: fadein .5s, move .5s; 
      -o-animation: fadein .5s, move .5s; 
} 

@-moz-keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 

@-o-keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 

@keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 

@-webkit-keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 


@-moz-keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 

@-o-keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 

@keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 

@-webkit-keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 


@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 


@keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-moz-keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-webkit-keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-o-keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 
+0

@keyframes отсутствует! пожалуйста, проверьте синтаксис .. –

+0

Я добавил недостающие ключевые кадры, но он все тот же. –

ответ

2

анимация move и move1 не имеют @keyframes, без префикса.

Edit:

Добавить position:relative; в свой #about, и шаги должны работать. если вы не указали позицию (относительную, абсолютную или фиксированную), браузер не может ее переместить.

+0

Извините, не могли бы вы объяснить дальше? Я немного смущен. Благодарю. –

+0

Я добавил ключевые кадры, но тот же результат все еще происходит. Анимация fadein работает хорошо, но движение вообще не оживляет. –

+0

Я отредактировал свой ответ. Похоже, что у вас отсутствует «позиция» для вашего #about. – rblarsen

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

  • Нет связанных вопросов^_^