0

我正在玩css-doodle，我正在尝试在网格中制作螺旋动画。

我想要做的是让它无限地在螺旋向外和再次螺旋之间交替。infinite目前，即使我将参数添加到animation属性中，我也只能让它播放一次动画。

我正在尝试使用两个动画：

  @keyframes bg {
    0% {
      background: transparent;
    }
    0.08%, 100%  {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
  }

  @keyframes bg-reverse {
    0% {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
    0.08%, 100%  {
      background: transparent;
    }
  }

然后像这样无限地播放它们，中间有延迟： animation: bg 12.1s linear calc(.05s*var(--RES)) forwards infinite, bg-reverse 12.1s linear calc(.05s*@max-col()*@max-row() + (.05s*@max-col()*@max-row() - .05s*var(--RES))) forwards infinite;

这是我的代码笔：https ://codepen.io/anon/pen/xzWxrd?editors=1000

有人看到我在这里做错了吗？

编辑：添加片段。反向动画在这里似乎不起作用：S

html, body { 
  height: 100%; 
  margin: 0 
}
body { 
  display: flex; 
  align-items: center; 
  justify-content: center 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.2/css-doodle.min.js"></script>
<css-doodle>
  :doodle {
    @grid: 11 / 10em;
    @shape: square;
  }
  --x: calc(0 - @row() + 6);
  --y: calc(0 - @col() + 6);
  --Absx: calc(@abs(0 - @row() + 6));
  --Absy: calc(@abs(0 - @col() + 6));
  --A: calc(@abs(@abs(0 - @row() + 6) - @abs(0 - @col() + 6)) + var(--Absx) + var(--Absy));
  --A2: calc(var(--A) * var(--A));
  --SGN: calc(@abs(0 - @row() + 6 + 0 - @col() + 6 + 0.1)/(var(--x) + var(--y) + 0.1));
  --Axy: calc(var(--A) + var(--x) - var(--y));
  --RES: calc(var(--A2) + var(--Axy)*var(--SGN) + 1);
  
  #mtv921
  animation: bg 12.1s linear calc(.05s*var(--RES)) forwards infinite, bg-reverse 12.1s linear calc(.05s*@max-col()*@max-row() + (.05s*@max-col()*@max-row() - .05s*var(--RES))) forwards infinite;

  @keyframes bg {
    0% {
      background: transparent;
    }
    0.08%, 100%  {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
  }
  
  @keyframes bg-reverse {
    0% {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
    0.08%, 100%  {
      background: transparent;
    }
  }
</css-doodle>

4

0 回答 0