Fazendo efeitos de transição CSS funcionar em todos os navegadores - css, firefox, google-chrome, css3, compatibilidade

Eu atualmente tenho o seguinte CSS, ele funciona no Google Chrome (Webkit), mas não em qualquer outro navegador.

Qual é a melhor maneira de fazer isso compatível com tudo?

Como você pode ver, está usando o webkit, mas não tenho certeza de quais são os equivalentes do moz.

Muito Obrigado

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

Respostas:

Sua declaração básica de transição para 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;

Aqui está uma das minhas ferramentas favoritas para ajudar a acelerar o processo: http://css3generator.com/

Talvez você precise de:

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

Exemplo:

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

Espero que seja útil.