Why can't I animate custom properties (aka CSS variables)?

Question

See this animation:

• The golden div has an animation where a custom property is animated
  (@keyframes roll-o-1 animates --o).
  

Answer 1

Not all CSS properties are animatable, and you cannot animate css variables. This is the list of the properties you can animate https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties