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
The code below will trigger on the transitionend event for whatever element(s) you have in the $element variable. There are four different event names as I believe these cover all of the cross-browser inconsistencies. Replace the ‘// your event handler’ comment with whatever code you wish to run when the event is triggered. $element.on(‘transitionend webkitTransitionEnd … 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
Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning: CSS position: relative; transition: top 2s ease 0s; /* only transition top property */ top: 0; /* start transitioning from position ‘0’ instead of ‘auto’ */ The reason this is needed is … 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
As far as I can tell it’s a bug, yes, Safari is rendering intersection where it shouldn’t. For some time I thought Safari is doing it right by always rendering intersection of elements, but as far as I understand the specs, only elements in the same 3d rendering context should intersect, and that would be … Read more
Trying to do the same thing. As of right now I do not think it is possible to animate a gradient. I’m using a workaround. Instead of animating the gradient, I’m using a semi-transparent gradient for the background-image and then animating the background color. #button { background-color: #dbdbdb; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, … Read more
Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get. See JSFiddle demo provided by Chris Jordan in another answer here. #menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5; } #menu:hover #list { max-height: 500px; transition: max-height … Read more
The page you link to has a compatibility table. Chrome 1.0 (-webkit prefix) Firefox 4.0 (2.0) (-moz prefix) 16.0 (16.0) (no prefix) Internet Explorer 10.0 (no prefix) Opera 10.5 (-o prefix) 12.0 (no prefix) Safari 3.2 (-webkit prefix) There is also an article on MSDN about CSS3 transitions in Internet Explorer.