使 CSS 过渡效果适用于所有浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11202963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making CSS transition effects work in all browsers
提问by eivers88
I currently have the following CSS, it works in Google Chrome (Webkit), but not in any other browser.
我目前有以下 CSS，它适用于 Google Chrome (Webkit)，但不适用于任何其他浏览器。
Whats the best way to make this compatible with everything?
使它与所有内容兼容的最佳方法是什么？
As you can see it is using webkit, but I'm not sure what the moz equivalents are.
正如您所看到的，它使用的是 webkit，但我不确定 moz 的等价物是什么。
Many thanks
非常感谢
.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;
}
回答by eivers88
Your basic cross browser CSS3 transition declaration:
您的基本跨浏览器 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;
Here is one of my favorite tools to help speed up the process: http://css3generator.com/
这是我最喜欢的工具之一，可以帮助加快流程：http: //css3generator.com/
回答by Sakata Gintoki
Maybe you need:
也许你需要：
-webkit-... // For Webkit browser(Chrome, Safari...)
-moz-... // For Mozilla browser
-o-... // For Opera browser
-ms-... // For Microsoft browser
none... // For all browser(Newest version)
Example:
例子：
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
Hope that is useful.
希望这是有用的。
