Firefox 使CSS过渡效果在所有浏览器中都能工作

Firefox 使CSS过渡效果在所有浏览器中都能工作,firefox,google-chrome,css,compatibility,Firefox,Google Chrome,Css,Compatibility,我目前有以下CSS,它可以在谷歌浏览器(Webkit)中使用,但不能在任何其他浏览器中使用 让它与所有东西兼容的最好方法是什么 正如您所看到的,它使用的是webkit,但我不确定moz的等价物是什么 非常感谢 .card{ margin-top: -50px; } .card { width: 286px; height: 224px; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s;

我目前有以下CSS,它可以在谷歌浏览器(Webkit)中使用,但不能在任何其他浏览器中使用

让它与所有东西兼容的最好方法是什么

正如您所看到的,它使用的是webkit,但我不确定moz的等价物是什么

非常感谢

.card{
    margin-top: -50px;
}

.card {
    width: 286px; height: 224px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.5s;
}
    .container:hover .card {
        -webkit-transform: rotateY(180deg); 
        -moz-transform: rotateY(180deg);                

    }

.face {
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}


.megatron {
    float: left; top: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
    .megatron .front {

    }
    .megatron .back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);

    }
        .megatron .back h2 {
            background: url(megatron-title.png); text-indent: -9999px; 
        }
        .megatron img {
            float: right;
        }

您的基本跨浏览器CSS3转换声明:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
以下是我最喜欢的帮助加快流程的工具之一:

也许您需要:

-webkit-...  // For Webkit browser(Chrome, Safari...)
-moz-...     // For Mozilla browser
-o-...       // For Opera browser
-ms-...      // For Microsoft browser
none...      // For all browser(Newest version)
示例:

-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;

希望这是有用的。

不要手动编写它们,而是尝试使用一个工具,如您是否尝试查找-moz等价物?