Use anchor links and the scroll-behavior property (MDN reference) for the scrolling container: scroll-behavior: smooth; Browser support: Firefox 36+, Chrome 61+ (therefore also Edge 79+), Safari 15.4+, Opera 48+. Intenet Explorer, non-Chromium Edge and older versions of Safari (that are still used by some users) do not support scroll-behavior and simply “jump” to the link … 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
I think I found A solution: -webkit-transform: translateZ(0px); Forcing hardware acceleration on the parent element seems to solve the problem… EDIT As commented, this hack disables font-smoothing and can degrade text rendering depending on your fonts, browser and OS!
To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state. Here is an example of what the border hover effect can look like : The border and transition are set on a pseudo element to prevent transitioning the text and avoid … Read more
I think I’ve got it. .wrapper { background:#DDD; display:inline-block; padding: 10px; height: 20px; width:auto; } .label { display: inline-block; width: 1em; } .contents, .contents .inner { display:inline-block; } .contents { white-space:nowrap; margin-left: -1em; padding-left: 1em; } .contents .inner { background:#c3c; width:0%; overflow:hidden; -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: … Read more
One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get … Here’s a DEMO You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it … Read more
Use css @keyframes .elementToFadeInAndOut { opacity: 1; animation: fade 2s linear; } @keyframes fade { 0%,100% { opacity: 0 } 50% { opacity: 1 } } here is a DEMO .elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; } @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; … Read more
The color transitions fine over time, but the font switches immediately for some dagnabbit reason. Your font-size transition is being overwritten by your color transition. transition: font-size 12s; /* transition is set to ‘font-size 12s’ */ transition: color 12s; /* transition is set to ‘color 12s’ !! */ Instead, you must combine them all into … Read more
There’s a technique used in Modernizr, improved: function transitionEndEventName () { var i, undefined, el = document.createElement(‘div’), transitions = { ‘transition’:’transitionend’, ‘OTransition’:’otransitionend’, // oTransitionEnd in very old Opera ‘MozTransition’:’transitionend’, ‘WebkitTransition’:’webkitTransitionEnd’ }; for (i in transitions) { if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { return transitions[i]; } } //TODO: throw ‘TransitionEnd event is not supported in … Read more
Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won’t see it, like the color changes, dimension changes etc. The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to … Read more