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
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
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.
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
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
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
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
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