Question

I would like to animate the background when I change the class of the .btn buttons, for example passing from a .btn-primary with loading on to a .btn-success or .btn-danger.

Right now, if I add -webkit-transition: background 1s linear to the .btn class and use js to switch the classes, the change is not animated

(Point of interest: i tried adding the css transition directive only in the chrome element inspection tool.)

Any idea?

UPDATE: if the button is in disabled mode the transitions work, maybe the problem is due to the use of css3 gradients as background-images which maybe are not supported by -webkit-transition?

Answer 1

I think you nailed it in your update. CSS can transition background colors and position, but not between gradients, which would be required to animate those.

Here’s an idea for a desperate workaround if you’re interested:

• Create a css3 keyframe animation
• Start by animating the background-position to “0 -20px” (not necessarily -20px, but whatever will get the gradient out of the way so you can only see the background color)
• Then, animate the background color to the new background color you want
• At some point when you’re animating the background color, switch the gradient to the new gradient you want. The gradient is out of view, so this won’t be seen in the animation.
• Finally, when the background color is finished animating, animate the background position back down to “0 0”.

If you do this all fast enough, you may be able to pull off a decent effect. I’d be curious to see it if you give it a try.