Making CSS-Übergangseffekte funktionieren in allen Browsern

Question

Ich habe derzeit die folgenden CSS, funktioniert in Google Chrome (Webkit), aber nicht in anderen Browsern.

Was ist der beste Weg, um dies mit allem kompatibel zu machen?

Wie Sie sehen können, verwendet es Webkit, aber ich bin mir nicht sicher, was die moz Äquivalente sind.

Vielen Dank

.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

Ihr Grund Cross-Browser CSS3 Übergang Erklärung:

-webkit-transition: all 500ms ease; 
-moz-transition: all 500ms ease; 
-ms-transition: all 500ms ease; 
-o-transition: all 500ms ease; 
transition: all 500ms ease; 

Hier ist eine meiner Lieblings-Tools den Prozess zu beschleunigen zu helfen: http://css3generator.com/

Answer 2

Vielleicht benötigen Sie :

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

Beispiel:

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

Hoffnung, die nützlich ist.