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.

What is the best way to make it compatible with everything?

As you can see, this uses webkit, but I'm not sure what 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 CSS3 to CSS 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 things up: http://css3generator.com/

Answer 2

Perhaps 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 this is helpful.