css - SASS 的关键帧参数

Question

我用 CSS 创建了一个旋转木马，我对此非常满意。它包含在片段中。原文在this CodePen .

它基本上是旋转四个盒子的位置。总动画时间为 8 秒，我已将其设置为在其中的 20% 内保持静态，然后将框移动 5%，然后再次等待(运行代码片段；我想我没有解释过很好)。

现在我想对其进行参数化。 Sass 是我的首选武器，我可以轻松设置一些有用的变量。所以就在我的风格的顶部，我有这个:

$delays: 0s, -6s, -4s, -2s;
$fullanimtime: 8s;
$animationstops: 0%, 20%, 25%, 45%, 50%, 70%, 75%, 95%, 100%;

我使用 $fullanimtime 作为我的 animation-duration，并使用 $delays 列表来配置我的 pos 的延迟-XXXX 样式:

.pos-1 {
  animation-delay: nth($delays, 1);
}
.pos-2 {
  animation-delay: nth($delays, 2);
}
.pos-3 {
  animation-delay: nth($delays, 3);
}
.pos-4 {
  animation-delay: nth($delays, 4);
}

这就像一个魅力，通过正确设置 $fullanimtime 和 $delays，我可以更改动画以在任何时间正确运行，无论是 8 秒, 或 120 秒。

问题是 @keyframes 使用百分比。因此，如果我将其他变量设置为较长的​​动画时间，则移动框的实际转换会变得非常慢:8 秒，转换运行 400 毫秒，但 120 秒，它们需要 6 秒，这比很酷。

所以 $animationstops 变量应该让我配置合理的时间。但这不起作用。

由于我不明白的原因，我不能在关键帧声明中使用 Sass nth 函数，也不能使用 Sass 变量。

@keyframes rotate-board {
  nth($animationstops, 1) {
    // This gives an error:
    // Invalid CSS after "nth": expected keyframes selector, was "($animationstop..."
  }
  $somevariable {
    // This gives an error:
    // Invalid CSS after " $somevalue ": expected ":", was "{"
  }
}

有没有办法解决这个问题，或者我是否发现了 Sass 的局限性？如果我想这样做，是否应该使用另一个预处理器？

body {
  margin: 0;
  padding: 0;
}
.frame {
  height: 580px;
  width: 100vw;
  background: lightgrey;
  position: relative;
  box-sizing: border-box;
}

.box {
  width: calc(50% - 30px);
  height: calc(50% - 30px);
  top: 20px;
  left: 20px;
  position: absolute;
  animation-name: rotate-board;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.redbox {
  background: red;
}
.greenbox {
  background: green;
}
.bluebox {
  background: blue;
}
.orangebox {
  background: orange;
}

@keyframes rotate-board {
  0% {
    top: 20px;
    left: 20px;
    bottom: calc(50% + 10px);
    right: calc(50% + 10px);
  }
  20% {
    top: 20px;
    left: 20px;
    bottom: calc(50% + 10px);
    right: calc(50% + 10px);
  }
  25% {
    top: 20px;
    left: calc(50% + 10px);
    bottom: calc(50% + 10px);
    right: 20px;
  }
  45% {
    top: 20px;
    left: calc(50% + 10px);
    bottom: calc(50% + 10px);
    right: 20px;
  }
  50% {
    top: calc(50% + 10px);
    left: calc(50% + 10px);
    bottom: 20px;
    right: 20px;
  }
  70% {
    top: calc(50% + 10px);
    left: calc(50% + 10px);
    bottom: 20px;
    right: 20px;
  }
  75% {
    top: calc(50% + 10px);
    left: 20px;
    bottom: 20px;
    right: calc(50% + 10px);
  }
  95% {
    top: calc(50% + 10px);
    left: 20px;
    bottom: 20px;
    right: calc(50% + 10px);
  }
  100% {
    top: 20px;
    left: 20px;
    bottom: calc(50% + 10px);
    right: calc(50% + 10px);
  }
}

.pos-1 {
  animation-delay: 0s;
}
.pos-2 {
  animation-delay: -6s;
}
.pos-3 {
  animation-delay: -4s;
}
.pos-4 {
  animation-delay: -2s;
}

<div class="frame">
  <div class="box redbox pos-1"></div>
  <div class="box greenbox pos-2"></div>
  <div class="box bluebox pos-3"></div>
  <div class="box orangebox pos-4"></div>
</div>

Answer 1

你可以这样写你的变量:

#{nth($animationstops, 1)} 

我为你创建了一个 Sassmeister: https://www.sassmeister.com/gist/7c9b06c6b5a7cc580b14cbd1b312c566

这是在工作:https://codepen.io/anon/pen/PBeNLV

PS:你的动画很漂亮!恭喜! :)