Я запускаю этот код, наводя на изображение другой, и он имеет код перехода. Как ни странно, он не работает в 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 он работает странно, вы наводите на него курсор, и у него нет перехода, просто прямое изменение изображения.
Если вы используете 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 не поддерживает переходную анимацию на фоновых изображениях
float:center