Question

我尝试使用悬停动画进行一些转换。在Opera和chrome中它可以工作，但对于Mozilla则不行。我需要做什么！？我的代码在

之下

HTML

<a href="">
    <div class="teams back"></div>
</a>

CSS

 .teams{
        display: table-cell;
        background-size: cover;
        background-position:center;
        width: 360px;
        height: 370px;
        transition:1s;-webkit-transition:1s;-moz-transition:opacity 1.0s;-o-transition:1s;
    }
    #teams .back{background-image: url("link");}
    #teams .back:hover{background-image:url("link");}

我为此

制作了JSFiddle

Answer 1

第一个transition语句的语法无效。请参阅：transition

你必须改变

transition: 1s;
-pre-transition: 1s;

到

transition: <property> 1s;
-pre-transition: <property> 1s;

由于您已-moz-transition:opacity 1.0s;，因此您的<property>将为opacity。

Answer 2

您的转换属性语法应如下所示：

opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;

了解过渡如何运作阅读css transition

CSS Transition不适用于mozilla

2 个答案: