使用 "natural"属性值的 css3 动画

Question

我想定义一个 CSS3 动画，它在动画期间的某些时刻使用属性的自然值，就好像没有应用动画一样。

例如

@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 会从红色渐变为蓝色，而 thing2 会从绿色渐变为蓝色。我应该使用什么值来代替 0% 关键帧中的 natural？

我已经尝试了继承和透明，但都没有达到预期的效果。

注意我知道这可以通过 JavaScript 解决方案来完成，但如果可能的话，我更喜欢纯 css3 解决方案。

Answer 1

所以看起来你不能在关键帧中引用原始颜色。但是，您可以只指定 one keyframe在 keyframes 声明中，让浏览器为您插入颜色。使用仅 50% 的关键帧将使用 0%(又名 from)和 100% 处的原始属性(又名 to)。

有了这些知识，我们还可以使用 animation-delay 有效地对动画进行排队，以创建看起来像单个动画但实际上不是的动画。

例如:

@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>

您会看到元素逐渐变为蓝色并恢复为原始颜色，然后逐渐变为白色，然后变为原始颜色。

jsfiddle很好的衡量标准。