CSS3 background-color animation does not work in Chrome

advertisements

I have been working with changing the background colour of an element using css3 animations. However it does not work in Chrome. I have attached a jsFiddle example of the code I am using. It works in Firefox, but not in Chrome and despite my best efforts I have been unable to work out what the problem is.

In chrome is seems to ignore the reference to background-color only. If I move the item or apply any other effect to the element it works fine.

http://jsfiddle.net/qWKEs/6/

Thanks in advance.

This is a bug in chrome. Should be fixed in version 18 as per http://code.google.com/p/chromium/issues/detail?id=101245

Related Articles

Background color JQuery does not work

I want to change the background color of 'exampleDiv' from the original white background to when I call the code below to immediate change the background yellow and then fade back to the original white background. $("#exampleDiv").animate({ back

CSS3 Animation does not work on chrome

I have my CSS3 animation that work fine on Firefox, but do not show up on Chrome browser. you can see the final result on www.stamp4all.com the animation is the Arrows rotating. Here is the CSS code: /* Some stylesheet reset */ #sidemenu > ul { list-

Background size animation does not work in IE11 or Ipad

I am trying to create a simple img zoom with CSS3 animation by setting a background image to a div and then resizing that div with the animation. It works fine in FF and Chrome yet in Safari the effect is not smooth. I've read that adding -webkit-tra

Color animation does not work

I have a button named "b", which background I want to change from black to white, but it doesn't work. The error: 'System.Windows.Media.Animation.ColorAnimation' animation object cannot be used to animate property 'Background' because it is of i

The CSS3 Columns Z Index Does Not Work in Chrome

I am having a problem with the z-index of CSS3 Columns created with column-count. I want to move the clicked div on top of the list with .animate(), but when I am clicking an element on the right column it goes behind the elements of the left column.

background piece: fixed does not work with chrome

I am developing a website in which I have used the background-attachment:fixed property. It's working fine in Firefox, but the image is not fixed. In Chrome it's behaving normal. Here is code: CSS: .AboutBg { background-attachment: fixed; background-

The CSS3 animation does not work on Android 4.2

I'm developing an app using Worklight where I need to put a small animated image using CSS. In tests on Android devices with version 4.4 works perfectly, I performed some tests on devices with Android 4.2 and 4.1 and this same animation does not work

Linear gradient animation does not work in Firefox

Could someone explain why linear gradient animation does not work in Firefox (Latest version). In all other browsers it is working just fine. .pop_up_caller_bg_form_timer_time:before { content: ""; position: absolute; border-radius: 50%; backgro