动画不使用计算的CSS变量

Question

我希望用CSS var动画SVG圆的属性stroke-dasharray。

在绿色，动画是正确的，动画连续和顺利的。

在红色中，动画是不正确的，因为它在步骤中将动画化。

我认为计算CSS变量有问题，但我不明白是什么。

我们可以看到，带有正方形的动画是正确的，即使它使用了计算出来的CSS变量。

​

body {
  display: flex;
}

svg {
  width: 200px;
  height: 200px;
}

circle.good {
  stroke: green;
  stroke-width: 5;
  animation: good-dash 2s ease-in-out infinite;
}

circle.bad {
  stroke: red;
  stroke-width: 5;
  animation: bad-dash 2s ease-in-out infinite;
  --stroke-dasharray: 10;
}

.square {
  width: 200px;
  height: 200px;
  background-color: green;
  animation: good-roll 2s infinite ease-in-out both;
  position: relative;
  --left: 1;
}

@keyframes good-dash {
  0% {
    stroke-dasharray: 1, 10;
  }
  50% {
    stroke-dasharray: 1, 5;
  }
  100% {
    stroke-dasharray: 1, 10;
  }
}

@keyframes bad-dash {
  0% {
    stroke-dasharray: 1, var(--stroke-dasharray);
  }
  50% {
    stroke-dasharray: 1, calc(var(--stroke-dasharray) / 2);
  }
  100% {
    stroke-dasharray: 1, var(--stroke-dasharray);
  }
}

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

<svg viewBox="25 25 50 50">
  <circle class="good" cx="50" cy="50" r="20" fill="none"/>
</svg>
<svg viewBox="25 25 50 50">
  <circle class="bad" cx="50" cy="50" r="20" fill="none"/>
</svg>
<div class="square"></div>

​

Answer 1

在calc表达式中，单元是必须的，这些表达式所涉及的东西并不是自然统一的，实际上，您应该尝试在任何地方使用它们，因为CSS主要需要它们。

• 不透明是一个真正的不统一的属性，它只是一个在说明书中。
• 然而，中风-达沙雷不是不统一的，它既不是<length>，也不是<percentage>。
• SVG有一个特殊的“遗留”规则，它规定SVG特有的一些属性通常需要编写没有单元的单元。

当涉及到calc表达式时，允许省略单元的特定SVG规则不适用于任何应该有一个单位的东西，都必须有一个单位。。Chrome目前还没有实现这一要求，但我预计它们会在某一时刻实现。

​

body {
  display: flex;
}

svg {
  width: 200px;
  height: 200px;
}

circle.good {
  stroke: green;
  stroke-width: 5;
  animation: good-dash 2s ease-in-out infinite;
}

circle.bad {
  stroke: red;
  stroke-width: 5;
  animation: bad-dash 2s ease-in-out infinite;
  --stroke-dasharray: 10px;
}

.square {
  width: 200px;
  height: 200px;
  background-color: green;
  animation: good-roll 2s infinite ease-in-out both;
  position: relative;
  --left: 1;
}

@keyframes good-dash {
  0% {
    stroke-dasharray: 1, 10;
  }
  50% {
    stroke-dasharray: 1, 5;
  }
  100% {
    stroke-dasharray: 1, 10;
  }
}

@keyframes bad-dash {
  0% {
    stroke-dasharray: 1px, var(--stroke-dasharray);
  }
  50% {
    stroke-dasharray: 1px, calc(var(--stroke-dasharray) / 2);
  }
  100% {
    stroke-dasharray: 1px, var(--stroke-dasharray);
  }
}

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

<svg viewBox="25 25 50 50">
  <circle class="good" cx="50" cy="50" r="20" fill="none"/>
</svg>
<svg viewBox="25 25 50 50">
  <circle class="bad" cx="50" cy="50" r="20" fill="none"/>
</svg>
<div class="square"></div>

​