使用Firefox鼠标悬停的CSS翻转问题

Question

我在我的网站上使用CSS翻转效果。我从this website得到了这个“css-flip”。

它在所有浏览器中都运行良好，唯一的问题是，在检查Firefox时，在翻转之后，段落之间会出现闪烁的黑色，如下所示：

显示颜色只是一秒钟。怎么避免这个？

This is my code：

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */

.flip-container:hover .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.flip-container:hover .front {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 100%;
  height: 180px;
}
/* flip speed goes here */

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}
/* back, initially hidden pane */

.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background-color: #5fae25 !important;
  color: #fff;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="m-b20 bg-white shadow front">

      <div class=services-wrap>
        <a href=callcenter-services.htm style=text-decoration:none>
          <div class="text-center">
            <span class="icon-circle"><i class="fa fa-phone fa-2x"></i></span>
            <h5 class="text-center services-head m-t20">CALL CENTER SERVICE</h5>
            <p class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed nec.</p>
          </div>
        </a>
      </div>
      <div class=clearfix></div>
    </div>
    <div class="back">
      <p>This is nice for exposing more information about an image.
        <br />This is nice for exposing more information about an image.
      </p>

    </div>
    <div class=clearfix></div>
  </div>
</div>

Answer 1

我已在所有浏览器上测试了您的小提琴，并且它在我这边工作正常，甚至在两个可用版本的Firfox（Native和Developer Edition）上进行了测试。 只需确保您遵循跨浏览器兼容的CSS格式（如-webkit-， - o-等）即可使用您正在使用的每种效果。