elem.animate() as cool as not ready to use!

wat.js

// create element with color green
var elem = document.createElement('div');
elem.style.color = 'green';
document.body.appendChild(elem);            // add to document, to make getComputedStyle/animate works
console.log(getComputedStyle(elem).color);  // rgb(0, 128, 0) - it's OK!

// add animation
var player = elem.animate([
  { color: 'red' },
  { color: 'blue' }
], {
  duration: 1  // if no duration, animation is not apply
});
console.log(getComputedStyle(elem).color);  // rgb(255, 0, 0)
  // suppose it's OK too, because element is under animation, that at the init phase
  // and we know about anomation, just because we defined it one line before

// ....
// in another place, far from player definition
// you can't change the color!
elem.style.color = 'yellow';
console.log(getComputedStyle(elem).color);  // rgb(255, 0, 0)
  // it's OK only if you know about defined animation
  // but in another case it looks strange

// At this point you'll see in Developer Tools that no styles that
// apply `red` to `color` (only `yellow` in style attribute).
// But color is `red` and computed style tab says the same.
// I believe, nobody have an idea why... no tool, or method, or property
// that could say you the reason!

// How to change color now?
// If you have no `player` reference, there is no way.
// Because current implementations (Chrome 36/Opera 23) have no 
// `Element#getCurrentAnimations()` or `Element#getAnimationPlayers()` interfaces.
// So, single solution is:
player.cancel();
console.log(getComputedStyle(elem).color);  // rgb(255, 255, 0)
  // look, Ma! we've got control back!