Question

我想定义一个CSS3动画，在动画过程中的某些点，它使用属性的自然值，就像动画未应用一样。

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;
}

事物1会从红色变为蓝色，而事物2会从绿色变为蓝色。我应该在0％关键帧中natural的位置使用什么值？

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

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

Answer 1

所以看起来你无法在关键帧中引用原始颜色。但是，您只需在keyframes声明中指定one keyframe，然后让浏览器为您插入颜色。使用仅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以获得良好的衡量标准。

Answer 2

如果您对books和:before使用伪元素（例如.thing1），将其颜色设置为蓝色，并为其. thing2设置动画，则可以实现此目的。这是一个更多的工作，但我相信它将是更灵活的解决方案：

（参见下面的工作演示）

opacity

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

css3动画使用＆＃34; natural＆＃34;适当的价值

2 个答案: