Hacer que los efectos de transición de CSS funcionen en todos los navegadores

Question

Actualmente tengo el siguiente CSS, funciona en Google Chrome (Webkit), pero no en ningún otro navegador.

¿Cuál es la mejor manera de hacer esto compatible con todo?

Como puede ver, usa webkit, pero no estoy seguro de cuáles son los equivalentes de moz.

Muchas gracias

.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

Tu básica declaración transición CSS3 navegadores:

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

He aquí una de mis herramientas favoritas para ayudar a acelerar el proceso: http://css3generator.com/

Answer 2

Tal vez usted necesita :

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

Ejemplo:

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

Hope que es útil.