css-transforms

I have been trying to put some basic CSS3 animation. The objective is to toggle a class on the click event of a button and animate a div based on the added class. The code works perfectly for the first iteration of toggle in Firefox but for other browsers like Chrome and for the next iteration in Firefox the transformation is toggled in a blink of an eye. Please help me to figure out what's going wrong. Snippet: $('button').click(function() { $('div').toggleClass('clicked'); }); div { background-color: #ccc; height: 100px; width: 100px; transition-property: top, left; transition-duration: 1s;

Ok, so here's another IE10 glitch. The problem is that applying perspective on parent elements breaks the backface-visibility hidden setting. Please see this fiddle: http://jsfiddle.net/2y4eA When you hover over the red square it rotates by 180° on the x-axis, and even though the backface-visibility is set to hidden, the backface is shown, at least until the 180° is reached, then it disappears. Remove the perspective property, and you'll see that it works as expected, the backface isn't visible at all, but ofcourse the 3d effect is lost. It's possible to workaround this problem by applying

I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue. http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text. This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration