Webkit support for gradient transitions

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

Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

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

Drawing border colors during a CSS transition

I would use multiple linear-gradient and a complex animation (by animating size/position of each one) to obtain the final result. If you get the trick you can easily adjust the different values to obtain any animation you want. .draw { padding: 20px 50px; outline:none; border: none; box-shadow: none; background-image: linear-gradient(#f45e61, #f45e61), linear-gradient(#f45e61, #f45e61), linear-gradient(#f45e61, #f45e61), … Read more

CSS transitions with calc() do not work in IE10+

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

Why can’t I animate custom properties (aka CSS variables)?

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

CSS3 Fade Effect

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