css3 animations using "natural" property value - css

Question

I would like to define a CSS3 animation which, at some points during the animation, uses the natural value for a property as if the animation was not applied.
e.g.
#keyframes fadeblue
{
0%
{
background-color: natural;
}
100%
{
background-color: blue;
}
}
.thing1
{
background-color: red;
animation: fadeblue 2s;
}
.thing2
{
background-color: green;
animation: fadeblue 2s;
}
thing1 would fade from red to blue while thing2 would fade from green to blue.
What value should I use in the place of natural in the 0% keyframe?
I have tried both inherit and transparent but neither had the desired effect.
N.B. I know this can be done with a JavaScript solution but if possible I'd prefer a pure css3 solution.

Answer 1

So it seems you can't reference the original colour in keyframes. However, you can just specify one keyframe in a keyframes declaration and let the browser interpolate the colors for you. Using a keyframe of just 50% will use the original properties at 0% (aka from) and 100% (aka to).
With this knowledge we can also effectively queue animations using animation-delay to create what looks like a single animation, but isn't.
For example:
#keyframes fadeblue {
50% {
background-color: blue;
}
}
#keyframes fadewhite {
50% {
background-color: white;
}
}
.thing1 {
background-color: red;
animation: fadeblue 2s,
fadewhite 2s 2s;
/* shorthand here is: animation-name animation-duration animation-delay */
}
.thing2 {
background-color: green;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
.thing3 {
background-color: yellow;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
.thing4 {
background-color: purple;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
<div class="thing1">Thing 1</div>
<div class="thing2">Thing 2</div>
<div class="thing3">Thing 2</div>
<div class="thing4">Thing 2</div>
You'll see the elements fade to blue and back to the original colour, then fade to white then the original colour.
jsfiddle for good measure.

Answer 2

You can achieve this if you use a pseudo-element (e.g. :before) for .thing1 and . thing2, set it's color to blue, and animate it's opacity. It's a bit more work, but I believe it will be more flexible solution:
(see working demo below)
#keyframes fadeblue {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.thing1,
.thing2 {
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
.thing1:before,
.thing2:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
animation: fadeblue 2s infinite;
}
.thing1 {
background-color: red;
}
.thing2 {
background-color: green;
}
<div class="thing1"></div>
<div class="thing2"></div>