Question

我有一个h1元素，其子元素使用CSS3过渡动画。一切都适用于Chrome甚至IE 10+，但在Firefox中，转换效果只能在父元素中看到，而不是子元素。

代码是这样的

<h1>G<span>eneric</span> D<span>ata</span> B<span>inder</span></h1>

h1元素和span元素都有自己的转换：

h1{
    transition: all 800ms;
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    transition-property: line-height,width,font-size;
    -moz-transition-property: line-height,width,font-size;
    -ms-transition-property: line-height,width,font-size;
    white-space: nowrap;
}

h1 span{
    display:inline-block;
    max-width:500px;
    transition: all 800ms;
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    transition-property: opacity,max-width;
    -moz-transition-property: opacity,max-width;
    -ms-transition-property: opacity,max-width;
}

效果可以在这里看到：Generic Data Binder Site

这个问题在FireFox的渲染引擎中是一个错误或警告，还是我错过了一些关键的错误，以至于我犯了一个愚蠢的错误？

Answer 1

我认为这就像https://bugzilla.mozilla.org/show_bug.cgi?id=625289：父级部队重建中position值（来自/ fixed）的变化，这会改变孩子们的旧式信息因此，不会过渡。

儿童CSS3过渡不适用于FireFox

1 个答案: