Making CSS transition effects work in all browsers

问题

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

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

回答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.

来源：https://stackoverflow.com/questions/11202963/making-css-transition-effects-work-in-all-browsers