使用 "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% 处的原始属性(又名到)。

有了这些知识，我们还可以使用 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为了更好的衡量。