CSS动画自定义属性/变量 [英] CSS animate custom properties/variables

问题描述

我一直在努力使它工作一段时间.

I have been trying to get this to work for a while.

重点是内部div将具有某种形状，并且可能会有多个形状(这就是我使用nth-child选择器的原因). 应该显示此内部div，然后将其再次隐藏一段时间. 问题是，我想在一个动画中为所有(后来的)多个内部div设置动画.为此，我认为我可以使用CSS变量，但这似乎不起作用.

The point is that the inner div will have some shape and there will probably more than one (That's why I used the nth-child selector). This inner div is supposed to be shown and then be hidden again both for some set amount of time. the problem is, that I would like to animate all the (later) multiple inner divs in one animation. For this I thought I could use CSS variables, but this does not seem to work.

在这个示例中，我试图归档的是内部div基本上只是通过使用变量来闪烁.但是我在Firefox中的结果只是一个黑匣子.

What I am trying to archieve in this example is the inner div basically just blinking by using the variable. But my result in Firefox is just a black box.

我错过了什么吗?我已经检查了是否甚至可以在@keyframes中使用CSS变量，并且可以肯定. 动画中它们的唯一问题似乎是它们之间没有插值，但是它们突然切换了，在这种情况下这不是问题.

Am I missing anything? I already looked up if one could even use CSS variables in @keyframes and sure enough you can. The only problem with them in animations seems to be that they are not interpolated in between but that they suddenly switch which is not a problem in this case.

@keyframes test{
    from{
        --one: 0;
    }
    to{
        --one: 1;
    }
}

#test{
    width: 100px;
    height: 200px;
    background-color: black;
    animation: test 1s infinite;
}
#test :nth-child(1){
    width: 20px;
    height: 20px;
    margin: auto;
    background-color: white;
    opacity: var(--one,0);
}

<div id="test">
    <div></div>
</div>

推荐答案

如

值得注意的是，他们甚至可以进行过渡或制作动画，但自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.

---

因此，即使您在关键帧中将opacity与var()一起使用，也不会设置动画:

---

So even if you use opacity with var() in the keyframes it won't animate:

@keyframes test {
  from {
    --one:0;
    opacity: var(--one);
  }
  to {
    opacity: var(--one);
    --one: 1;
  }
}

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  animation: test 1s  infinite;
  
}

<div id="test">
  <div></div>
</div>

如果将其用作transition，则可以使其工作，因为在这种情况下，您将对不透明度而不是自定义属性应用转换:

By the way you can make it working if you use it as a transition because in this case you will apply a transtion to the opacity and not the custom property:

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test:hover {
  --one:1;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--one,0);
  transition:1s all;
}

<div id="test">
  <div></div>
</div>

这篇关于CSS动画自定义属性/变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！