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

【问题标题】：Animations only affect first element of css-doodle动画只影响 css-doodle 的第一个元素
【发布时间】：2023-04-01 16:49:01
【问题描述】：

我想在将鼠标悬停在涂鸦上时制作随机的“闪烁”效果。为此，当用户将鼠标悬停在涂鸦容器上时，我将动画名称 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>

【问题讨论】：

标签： css css-animations css-doodle

【解决方案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>

【讨论】：