Question

我正在玩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>

同一元素上的两个无限动画每次只能播放一次

0 个答案: