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.
2018 Update Now you can use just window.scrollTo({ top: 0, behavior: ‘smooth’ }) to get the page scrolled with a smooth effect. const btn = document.getElementById(‘elem’); btn.addEventListener(‘click’, () => window.scrollTo({ top: 400, behavior: ‘smooth’, })); #x { height: 1000px; background: lightblue; } <div id=’x’> <button id=’elem’>Click to scroll</button> </div> Older solutions You can do something … Read more
Working solution for flickering elements during transition in Chrome is to set up CSS for parent node: -webkit-backface-visibility: hidden;
There are many properties that can’t be transitioned. overflow is among them; the render engine has no idea how to transition between “hidden” and “shown”, because those are binary options, not intervals. This is the same reason why you can’t transition between display: none; and display: block; (for example): there are no in-between phases to … Read more
I simplified the code to make it shorter and make the 3d card flip on hover. The card flips on the Y axis from the front face to the backface this is what it looks like: This is what I changed for the filp effect: the front face wasn’t rotated on th Y axis on … Read more
Here is another way to do the same. fadeIn effect .visible { visibility: visible; opacity: 1; transition: opacity 2s linear; } fadeOut effect .hidden { visibility: hidden; opacity: 0; transition: visibility 0s 2s, opacity 2s linear; } UPDATE 1: I found more up-to-date tutorial CSS3 Transition: fadeIn and fadeOut like effects to hide show elements … Read more
Based on Michaels answer this is the actual CSS code to use .parent:hover .child { display: block; -webkit-animation: fadeInFromNone 0.5s ease-out; -moz-animation: fadeInFromNone 0.5s ease-out; -o-animation: fadeInFromNone 0.5s ease-out; animation: fadeInFromNone 0.5s ease-out; } @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; … Read more
This bug has been acknowledged by Mozilla. The fix is to add transform: rotateX(0deg) to the front and back objects. Adding backface-visiblity:hidden on the container, as suggested by @yalia, makes the back unresponsive in Chrome, hence that fix should be avoided. Here’s a fiddle with the fix.
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
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