element style has different value from computed style

Question

I came across a puzzling issue, where the computed style of an attribute has a different value than the element's style.

A few words first to describe my situation

I am animating the background-color property of an element and when the animation ends, I retrieve the computed bgcolor value and apply it to the element's style. This works fine

However, if I try now to alter the bgcolor nothing happens, although the value is indeed set on the element, as the developer tools report.

At this point if you toggle (through the browser's developer tools) between style and computed style, there is a discrepancy between what the 2 report, with the computed style taking precedence of course.

I have created a test script on fiddle that depicts the situation http://jsfiddle.net/d2S3d/14/

Attaching also some sample css cause stackoverflow does not let me to submit the post without it

.animate{ animation-name: bg_kf; animation-duration: 5s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-direction: normal;

    -webkit-animation-name: bg_kf;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: normal;

    -moz-animation-name: bg_kf;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-direction: normal;

    -o-animation-name: bg_kf;
    -o-animation-duration: 5s;
    -o-animation-timing-function: linear;
    -o-animation-delay: 0s;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    -o-animation-direction: normal;
}

@keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:red}
}

@-moz-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:red}
}

@-webkit-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:rgba(255, 140, 74, 0.16)}
}

@-o-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:rgba(255, 140, 74, 0.16)}
}

Any help appreciated regards

Answer 1

The problem here is that the animation properties you have defined in .animate keep the background color red, regardless of what the actual inline style rule specifies. This is why toggling the inline style doesn't seem to have any effect.

If you were to remove the .animate class right after you apply the inline style, everything will once again be back to normal:

$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
    var computedBg = $(this).css('background-color');
    $(this).css('background-color', computedBg);
    $(this).removeClass('animate');
});

Here is a demonstration (try clicking the button after the animation has completed): http://jsfiddle.net/vcfDj/