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: 
So it seems you can't reference the original colour in keyframes. However, you can just specify [one keyframe](http://lea.verou.me/2012/12/animations-with-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:

```css
@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;
}
```

```html
<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](http://jsfiddle.net/ty6s1yzc/) for good measure.
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)*

```css
@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;
}
```

```html
<div class="thing1"></div>
<div class="thing2"></div>
```