Html Firefox过渡->；翻译

所以我使用的是Bootstrap，我几乎完成了所有的事情，但是我不能让我的旋转木马在标题上有一个过渡。旋转木马内部的过渡工作正常，但我希望标题从顶部或底部滑入，然后淡入。 它在IE10/11和Webkit中工作。但是字幕转换在FF中不起作用。当我用Firebug手动“启动”转换时，即单击“不透明度”值打开和关闭时，它确实起作用。 我在google ing等网站上发现的唯一一件事是，你需要定义默认值。所以我对它进行了三次检查，我非常确定所有的默认值都已定义。 有人知道为什么它不起作用吗？我猜我忘了申报什么了

PS：我尝试过使用不同的风格来过渡，但没有一种有效（页边空白顶部、顶部和其他一些）。我正在使用translate，以便在手机/平板电脑上平稳过渡

这是我的旋转木马代码：

/*== Carousel transition ==*/
.carousel-inner > .item {
    display: none;
    width: 100%;
    position: relative;
    -webkit-transition: 1s ease-out -webkit-transform;   /* If the time is changed it also needs to be changed @ bootstrap.js -> line 359 */
    transition: 1s ease-out transform;
}
.carousel-inner > .item > img {
    width: 55%; /* Too make it fit next to side-items */
}
.carousel-inner > .item > .carousel-caption {
    opacity: 0;
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-duration: 0.5s, 0.6s;
    transition-timing-function: ease, ease-out;
    transition-delay: 0s, 0.5s;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.carousel-inner > .active > .carousel-caption {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .next > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
.carousel-inner > .prev {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .prev > .carousel-caption {
    -webkit-transform: translate(0, -340px);
    transform: translate(0, -340px);
    opacity: 0;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.carousel-inner > .next.left > .carousel-caption,
.carousel-inner > .prev.right > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
.carousel-inner > .active.left {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .active.left > .carousel-caption {
    -webkit-transform: translate(0, -340px);
    transform: translate(0, -340px);
    opacity: 0;
}
.carousel-inner > .active.right {
    -webkit-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}
.carousel-inner > .active.right > .carousel-caption {
    -webkit-transform: translate(0, 340px);
    transform: translate(0, 340px);
    opacity: 0;
}
/*== Carousel transition ==*/

---

我做了一把小提琴，但没能正常工作：

在检查我的代码20多次后，我放弃了，我没有继续浏览网站的其他部分。当我不得不改变carousel控件的位置时，我注意到我已经在默认样式表中声明了左类和右类。事实证明，你不能用Firefox转换浮动元素，至少不是完美的。 把我的左班改成了左班，现在一切都很好。

---

因此，如果Firefox中有错误的转换，请尝试检查是否有浮动元素，并通过其他方法定位它们。

哪个元素应该使用转换？你发对了JSFIDLE吗？这一个除了侧箭头上的悬停效果外什么也不做……文本（标题）是悬空的，可以从底部淡入并滑动。图像被挂起，从左侧滑出，从左侧滑回。但我似乎无法让它在小提琴中工作（我以前从未制作过），我非常确定它是基于您网站的Javascript，因此您也需要将Javascript代码添加到JS小提琴中。转换实际上是纯CSS，我已经包括了引导JS和CSS。Bootstrap js更改类，以便触发转换。虽然可能做了一些错误的事情，但我不知道JSFIDLE如何处理外部文件看起来我忘记了选择jQuery。。。。我的错。它正在工作。看到Chrome和Firefox的区别了吗？