FAQ & Tips (documentation draft)
Blinking LED
How to make a led blink depending on its value
css:
/* Do the maths here to keep css as clean as possible */
/* Assigned variables are available to the formulas that come after */
#{
threshold = 0.5;
value = @{this};
animationCount = value >= threshold ? "infinite": "0";
}
/* animation names are not scoped to the widget only and can be used in other widgets */
@keyframes blink {
0% {opacity:1;}
50% {opacity:0.5;}
}
/* To get the element's classname, open the dev panel (F12) and look for it ;)
/* We use a formula to define whether the animation should run or not */
.led {
animation: blink .1s steps(1) #{animationCount};
}