Переход не работает на Firefox

0

Я запускаю этот код, наводя на изображение другой, и он имеет код перехода. Как ни странно, он не работает в FireFox, но работает в Opera и Google Chrome. Я надеялся, что вы можете мне помочь, это мой первый пост.

CSS:

.class1 {
    visibility: visible
}

.class2 {
    background: url(image2); 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; height: 173px
}

.class1:hover .class2 {
    background: url(image1); 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; height: 173px
}

HTML:

<div class="class1" style="width: 280px; float:center">
    <p style="float:center" class="class2">
    </p>
</div>

Кажется, не работает в Firefox. Изображение есть, и переход работает, на Firefox он работает странно, вы наводите на него курсор, и у него нет перехода, просто прямое изменение изображения.

  • 0
    Можете ли вы поставить демо на jsfiddle.net? Благодарю.
  • 1
    Также нет такого свойства как float:center
Показать ещё 4 комментария
Теги:
transition
firefox

1 ответ

0
Лучший ответ

Если вы используете css3 с префиксами поставщиков, вам нужно также добавить фактический эквивалент css3, а не только префиксы, это был разрыв остановки, пока стандарты принимались.

Последний Firefox использует css3 в качестве стандарта (без префиксов и без поддержки), но префиксы по-прежнему поддерживают старые версии, поэтому не стоит их использовать, но они только отступают.

<style type="text/css" media="screen">
.class1 {visibility: visible}
.class2 {
    background: red; 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; 
    transition:all .9s ease; 
    height: 173px}
.class1:hover .class2 {
    background:yellow; 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; 
    transition:all .7s ease; 
    height: 173px
    }
</style>

<div class="class1" style="width: 280px; float:left;"><p style="float:center<class="class2">HJKHKSF</p></div>

Я взял изображения и использовал цвета.

Никаких дальнейших комментариев: после небольшого исследования кажется, что firefox не поддерживает переходную анимацию на фоновых изображениях

  • 0
    Я попробовал это здесь, и это все еще не имеет тот же эффект, который вы видите в других браузерах.
  • 0
    Я получаю постепенное исчезновение с красного на желтый во всех браузерах. Что вы видите? Проверьте это здесь jsfiddle css3 transition
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню