Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving any other transitions in place), you simply have to override the CSS. I’d suggest adding a class, such as no-transition (but the … Read more
In Firefox, it does appear to be a race between layout completing and the CSS transition. Chrome is much more predictable. If I set the class name on a setTimeout(), Chrome always works, Firefox only works if the setTimeout() time is long. With this code in Firefox (even using the setTimeout()), the text shows immediately: … Read more
I always add : -webkit-backface-visibility: hidden; -webkit-perspective: 1000; When working with 3d transform. Even “fake” 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome. I did test on your exemple and, as far as I can tell, it works. As for the “why” part of … Read more
This is sort of a known behavior with Chrome. Firefox does seem to be able to handle the removal of animation smoothly with transition but Chrome doesn’t do so. I had seen this behavior happen earlier also in this thread. Why does removal of an animation not work with transition in Chrome? While I cannot … Read more
I would use multiple linear-gradient and a complex animation (by animating size/position of each one) to obtain the final result. If you get the trick you can easily adjust the different values to obtain any animation you want. .draw { padding: 20px 50px; outline:none; border: none; box-shadow: none; background-image: linear-gradient(#f45e61, #f45e61), linear-gradient(#f45e61, #f45e61), linear-gradient(#f45e61, #f45e61), … Read more
After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround. .face.back { background-color: #125672; -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } Becomes: .face.back { background-color: #125672; -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg) translateZ(1px); } The addition of the translateZ to the transform makes the left side of the element clickable. Here … Read more
WebKit (Chrome, Safari) does not support transitions on pseudo elements. https://bugs.webkit.org/show_bug.cgi?id=23209 http://code.google.com/p/chromium/issues/detail?id=54699 It should work in Firefox. Edit: The issue in WebKit is now resolved. The patch allready landed in Chrome Carnery, so it will be supportet from version 26 on. I don’t know about Safari.
This is a confirmed Chrome bug that popped up in a recent update, and should hopefully get resolved soon. Here’s a reduced test case: https://codepen.io/chasebank/pen/KZgYXK Here’s the Chromium issue marked for triage. I think the best thing to do for now is nothing. Wait for a proper fix to be implemented. It’s never a good … Read more
A cleaner approach that does not rely on setTimeout, is to read the css property in question before setting it: var div = $(‘<div />’).addClass(‘trans’); $(‘#container’).append(div); div.css(‘width’);//add this line div.css(‘width’, ‘200px’); Working here: var div = $(‘<div class=”trans” />’); $(‘#container’).append(div); var div = $(‘<div />’).addClass(‘trans’); $(‘#container’).append(div); div.css(‘width’);//add this line div.css(‘width’, ‘200px’); .trans { width: 20px; … Read more
There isn’t a clean way at this moment (without using CSS Animations — see the nearby answer by James Dinsdale for an example using CSS Animations). There is a spec bug 14617, which unfortunately wasn’t acted upon since it was filed in 2011. setTimeout does not work reliably in Firefox (this is by design). I’m … Read more