Tworzenie efektów przejść CSS działa we wszystkich przeglądarkach

Question

Mam obecnie następujące pliki CSS, działa ono w Google Chrome (Webkit), ale nie w żadnej innej przeglądarce.

Jaki jest najlepszy sposób, aby było to zgodne ze wszystkim?

Jak widać, używa on webkita, ale nie jestem pewien, co to są odpowiedniki moz.

Dziękujemy

.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

Twój podstawowy deklaracja przeglądarka krzyż CSS3 przejścia:

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

Oto jeden z moich ulubionych narzędzi, które pomogą przyspieszyć proces: http://css3generator.com/

Answer 2

Może trzeba :

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

przykład:

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

nadzieja, że ​​jest przydatna.