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
CSS transitions work by defining two states for the object using CSS. In your case, you define how the object looks when it has the class “saved” and you define how it looks when it doesn’t have the class “saved” (it’s normal look). When you remove the class “saved”, it will transition to the other … Read more
Yes, if such things are supported by the browser, then an event is triggered when the transition completes. The actual event however, differs between browsers: Webkit browsers (Chrome, Safari) use webkitTransitionEnd Firefox uses transitionend IE9+ uses msTransitionEnd Opera uses oTransitionEnd However you should be aware that webkitTransitionEnd doesn’t always fire! This has caught me out … Read more
CSS (or jQuery, for that matter) can’t animate between display: none; and display: block;. Worse yet: it can’t animate between height: 0 and height: auto. So you need to hard code the height (if you can’t hard code the values then you need to use javascript, but this is an entirely different question); #main-image{ height: … Read more
You’re applying transitions only to the :hover pseudo-class, and not to the element itself. .item { height:200px; width:200px; background:red; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; } Demo: https://jsfiddle.net/7uR8z/6/ If you don’t want … Read more
The use of transition: none seems to be supported (with a specific adjustment for Opera) given the following HTML: <a href=”#” class=”transition”>Content</a> <a href=”#” class=”transition”>Content</a> <a href=”#” class=”noTransition”>Content</a> <a href=”#” class=”transition”>Content</a> …and CSS: a { color: #f90; -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in; -o-transition:color 0.8s ease-in, background-color 0.1s … Read more
Here’s a solution that also works on Firefox: transition: all 0.3s ease, background-position 1ms; I made a small demo: http://jsfiddle.net/aWzwh/
CSS3’s transitions and animations support easing, formally called a “timing function”. The common ones are ease-in, ease-out, ease-in-out, ease, and linear, or you can specify your own using cubic-bezier(). ease-in will start the animation slowly, and finish at full speed. ease-out will start the animation at full speed, then finish slowly. ease-in-out will start slowly, … 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
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