CSSトランジションエフェクトをすべてのブラウザで使用できるようにする

Question

現在、次のCSSを持っています.Google Chrome（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; 
     } 

Answer 1

あなたの基本的なクロスブラウザ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; 

ここでは、プロセスをスピードアップするために私のお気に入りのツールの一つです：http://css3generator.com/

Answer 2

たぶん、あなたが必要：

-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; 

希望に有用です。