Making CSS transition effects work in all browsers

Question

I currently have the following CSS, it works in Google Chrome (Webkit), but not in any other browser.

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.

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

Answer 1

Your basic cross browser CSS3 transition declaration:

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

Answer 2

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.