动画只影响 css-doodle 的第一个元素

Question

我想在将鼠标悬停在涂鸦上时产生随机 "blinking" 效果。为此，当用户将鼠标悬停在涂鸦容器上时，我将动画名称 blink 存储到一个变量中。由于某种原因，动画仅适用于网格的第一个元素。有没有办法将动画应用到所有元素？

代码笔：https://codepen.io/entityinarray/pen/mdbRPRz

<html>
  <script src="https://unpkg.com/css-doodle@0.7.2/css-doodle.min.js"></script>
  
  <css-doodle>
    :doodle {
      @grid: 4/128px;
      --h: ;
    }
    
    :doodle(:hover) {--h: blink;}
    
    background: #200040;
    animation-delay: rand(500ms);
    animation: @var(--h) 1s infinite;
    
    @keyframes blink {
      0% {
        background: #200040;
      }
      100% {
        background: #8000c0;
      }
    }
  </css-doodle>
</html>

Answer 1

问题是使用 @var(--h) 会生成类似 var(--h)-x 的无效代码，只有第一项具有良好的价值 var(--h)。

您可以简单地考虑如下所示的动画状态，而不是这样做。注意rand()要和@一起使用，放在动画定义之后：

<html>
  <script src="https://unpkg.com/css-doodle@0.7.2/css-doodle.min.js"></script>
  
  <css-doodle>
    :doodle {
      @grid: 4/128px;
    }
    
    :doodle(:hover) {--h:running;}
    
    background: #200040;
    animation: blink 1s infinite;
    animation-play-state:var(--h,paused);
    animation-delay: @rand(500ms);
    
    @keyframes blink {
      0% {
        background: #200040;
      }
      100% {
        background: #8000c0;
      }
    }
  </css-doodle>
</html>

动画只影响 css-doodle 的第一个元素

Animations only affect first element of css-doodle

css

css-animations

css-doodle