Question

我试图对一个盒子产生影响，在悬停时将其降低5px。

它在Chrome上运行顺畅，但在Firefox上它没有进行转换。

请使用firefox并使用chrome

查看下一个codepen

<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

您好，我想这可能会帮助您http://codepen.io/anon/pen/dHBni

检查下面的css以查找不同浏览器的过渡属性

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
  cursor: pointer;
}

.box:hover {
  background-color: green;


}

有关转换http://css3.bradshawenterprises.com/transitions/

的详细信息

Answer 2

使用填充

以下是仅使用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和transitions here。

另请注意，transition并未应用于:hover。它需要在基础级别调用（在这种情况下为div级别。）

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

2 个答案:

使用填充

使用转换