代码之家 › 专栏 › 技术社区 › yunzen

为什么我不能设置自定义属性的动画?

css-variables css-animations css-transitions css3 css

2

yunzen · 技术社区 · 6 年前

查看此动画:

golden div有一个动画,其中设置了自定义属性的动画
( @keyframes roll-o-1 动画 --o ).
这将以步为单位设置动画。
银色div有一个动画,其中 正常的 属性已设置动画
( @keyframes roll-o-2 动画 left ).
这是连续的动画。

为什么黄金分割不顺利?
有没有也使用变量的解决方法?

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

2 回复 | 直到 6 年前

1

4

Temani Afif 6 年前

从 the specification :

可设置动画:否

那么

值得注意的是,它们甚至可以转换或动画, 但是由于行动单位无法解释他们的内容 ,它们总是使用“50%翻转”行为,该行为用于无法智能插值的任何其他值对。但是,@keyframes规则中使用的任何自定义属性都会被动画污染,这会影响通过动画属性中的var()函数引用时如何处理该属性。

因此,基本上,您可以在属性上使用transition和animation,它们的值是用自定义属性定义的,但不能对自定义属性执行此操作。

注意下面例子中的不同,我们可能认为两个动画是相同的,但不是 left 但不是如何设置 左边 (也可以在任何地方使用)

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

使用转换的另一个示例:

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

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

我们有一个转换,但不是针对自定义属性。是为了背景,因为在 :hover 我们正在重新评估这个值,这样背景就会改变,转换就会发生。

对于动画,即使定义了 左边 属性,则由于 动画被污染 如上所述:

#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=“一”></div>
<br>
<div id=“两个”><div>

2

3

arieljuod 6 年前

并非所有的CSS属性都是可设置动画的,并且不能设置CSS变量的动画。这是可以设置动画的属性列表 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties