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/[email protected]/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>
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/[email protected]/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>