CSS3 转换和过渡在 Firefox 上无法正常工作

Question

我试图影响一个框，使其在悬停时下降 5 像素。

它在 Chrome 上运行顺畅，但在 firefox 上它不进行转换。

请看下codepen使用 firefox 和使用 chrome

<div class="test"></div>

.test {
    background-color:blue;
    width: 200px;
    height: 200px;
    @include transition(transform .3s 0 ease);
    @include transform(translateY(0));
    &:hover {
      @include transform(translateY(5px));
    }
 }

Answer 1

使用填充

这是我的首选方法，仅使用 padding:
<强> JSFiddle DEMO

CSS:

body {
    margin: 0;
    padding: 0;
}

.test {
    background-color:blue;
    width: 200px;
    height: 200px;
}
.test:hover {
    margin-top: 10px;
}
.transition {
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
    transition: margin 0.5s ease-out;
}

使用变换

或者如果你仍然想使用transform:
<强> JSFiddle DEMO

CSS:

body {
    margin: 0;
    padding: 0;
}
.test {
    background-color:blue;
    width: 200px;
    height: 200px;
}
.test:hover {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10p));
    -o-transform: translateY(10px);
    transform: translateY(10px);
}
.transition {
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}

正如 Kiran 所说，每个浏览器都对直接使用 transform 和 transition 有不同的支持。您可以检查谁可以使用 transforms here和转换 here .

另请注意，transition 未应用于 :hover。它需要在基础级别调用(在本例中为 div 级别)。