为什么我不能设置自定义属性(又称CSS变量)的动画? [英] Why can't I animate custom properties (aka CSS variables)?

问题描述

观看此动画:

• 金色div包含一个动画，其中自定义属性已设置动画
  (@keyframes roll-o-1动画--o).
  这会逐步进行动画处理.
• 银色div的动画具有 normal 属性的动画
  (@keyframes roll-o-2动画left).
  这会连续进行动画处理.

• The golden div has an animation where a custom property is animated
  (@keyframes roll-o-1 animates --o).
  This animates in steps.
• The silver div has an animation where a normal property is animated
  (@keyframes roll-o-2 animates left).
  This animates continuously.

为什么金手指"不能流畅地动画?
有没有使用变量的解决方法?

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  --o: 0;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 0;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: 0px;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

<div id="one"></div>
<br>
<div id="two"></div>

推荐答案

来自

可动画播放:否

Animatable: no

然后

值得注意的是，它们甚至可以进行过渡或动画化，但是由于UA无法解释其内容，因此它们始终使用用于其他任何对的翻转50％"行为无法智能插值的值.但是，@ keyframes规则中使用的任何自定义属性都会受到动画的污染，这会影响通过动画属性中的var()函数进行引用时如何对待它.

Notably, they can even be transitioned or animated, but since the UA has no way to interpret their contents, they always use the "flips at 50%" behavior that is used for any other pair of values that can’t be intelligently interpolated. However, any custom property used in a @keyframes rule becomes animation-tainted, which affects how it is treated when referred to via the var() function in an animation property.

因此，基本上，您可以对属性进行过渡和动画处理，这些属性的值是使用自定义属性定义的，但您不能为该自定义属性执行此操作.

So basically, you can have transition and animation on property where their value are defined with a custom property but you cannot do it for the custom property.

请注意以下示例中的差异，在这些示例中，我们可能认为两个动画相同但不同.浏览器知道如何为left设置动画，但不知道如何为left使用的自定义属性设置动画(也可以在任何地方使用)

Notice the difference in the below examples where we may think that both animation are the same but no. The browser know how to animate left but not how to animate the custom property used by left (that can also be used anywhere)

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 1;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: calc(var(--o) * 1px);
  }
  50% {
    left: calc(var(--o) * 50px);
  }
  100% {
    left: calc(var(--o) * 100px);
  }
}

<div id="one"></div>
<br>
<div id="two"></div>

另一个使用过渡的示例:

Another example using transition:

.box {
  --c:red;
  background:var(--c);
  height:200px;
  transition:1s;
}
.box:hover {
  --c:blue;
}

<div class="box"></div>

我们有一个过渡，但没有自定义属性.这是为背景而设计的，因为在:hover状态下，我们将再次评估该值，因此背景会发生变化，过渡也会发生.

We have a transition but not for the custom property. It's for the backgroud because in the :hover state we are evaluating the value again thus the background will change and the transition will happen.

对于动画，即使您在关键帧中定义了left属性，由于上述动画污染，您也不会获得动画:

For the animation, even if you define the left property within the keyframes, you won't have an animation due to the animation-tainted described above:

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
     left: calc(var(--o) * 1px);
  }
  50% {
    --o: 50;
     left: calc(var(--o) * 1px);
  }
  100% {
    --o: 100;
    left: calc(var(--o) * 1px);
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 1;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: calc(var(--o) * 1px);
  }
  50% {
    left: calc(var(--o) * 50px);
  }
  100% {
    left: calc(var(--o) * 100px);
  }
}

<div id="one"></div>
<br>
<div id="two"></div>

这篇关于为什么我不能设置自定义属性(又称CSS变量)的动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！