Perhaps something like this. Basically it’s just looking to see if the CSS transition property has been defined: function supportsTransitions() { var b = document.body || document.documentElement, s = b.style, p = ‘transition’; if (typeof s[p] == ‘string’) { return true; } // Tests for vendor specific prop var v = [‘Moz’, ‘webkit’, ‘Webkit’, ‘Khtml’, … 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
Maybe transform: translateX() can provide a work-around. Depending on the circumstances, using transforms and the right property might be better: right: 10%; transform: translateX(-4rem); Here is a modified version of your script: http://jsfiddle.net/xV84Z/1/. Alternatively, while you can’t use calc() within a translateX() in IE (because of a bug), you can apply multiple translateX()s in a … Read more
Fix delay solution: Put cubic-bezier(0, 1, 0, 1) transition function for element. scss .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); &.full { max-height: 1000px; transition: max-height 1s ease-in-out; } } css .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .text.full { max-height: 1000px; … Read more
It looks like you’ve got a handle on how to do them, just not when to do them. A transition is an animation, just one that is performed between two distinct states – i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state … Read more
When this question was asked, it wasn’t possible to animate custom properties, as @temani afif correctly pointed out – since the UA has no way to interpret their contents Since then, CSS Houdini have put together the CSS Properties and Values API specification This specification extends [css-variables], allowing the registration of properties that have a … Read more
You can’t transition between two background images, as there’s no way for the browser to know what you want to interpolate. As you’ve discovered, you can transition the background position. If you want the image to fade in on mouse over, I think the best way to do it with CSS transitions is to put … 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
This is not a bug– you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions). This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts. visibility … Read more
While CSS Values and Units does not explicitly say that unitless zero times are not allowed, it does say that unitless zeroes are allowed for lengths and angles. I believe this implies unitless zeroes are not allowed for any other dimension or quantity, because unitless zeroes are never addressed anywhere else in the spec. Therefore, … Read more