Animations only affect first element of css-doodle

Question

I want to make random "blinking" effect when hovering over a doodle. For this i store animation name blink into a variable when user hovers over doodle container. For some reason animation applies only to the first element of the grid. Is there a way to apply the animation to all elements?

CodePen: 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>

score 2 · Accepted Answer · answered Aug 22 '19 at 19:03

The issue is that the use of @var(--h) is generating code like var(--h)-x which is invalid and only the first item is having the good value var(--h).

Instead of doing this you can simply consider the animation state like below. Note that rand() should be used with @ and placed after the animation definition:

<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>

Animations only affect first element of css-doodle

1 Answers1