ded's solution to "JS or CSS code for consistent flashing screen | BONUS for flickering flashlight"

Something like this?<\/p>\n

<html><\/span>\n    <body><\/span>\n        <style><\/span>\n            #pulser {\n                width: 100%;\n                height: 100%;\n                background: red;\n                animation-name: pulser;\n                animation-duration: .005s;\n                animation-iteration-count: infinite;\n                animation-direction: alternate;\n            }\n            @keyframes pulser {\n                0%   {background-color: red;}\n                100%   {background-color: white;}\n            }\n        </style><\/span>\n        <span<\/span> id=<\/span>&quot;hertz&quot;<\/span>><\/span>10</span><\/span>Hz\n        <input<\/span> value=<\/span>&quot;10&quot;<\/span> min=<\/span>&quot;1&quot;<\/span> max=<\/span>&quot;25&quot;<\/span> oninput=<\/span>&quot;setHertz(this)&quot;<\/span> type=<\/span>&quot;range&quot;<\/span> step=<\/span>&quot;1&quot;<\/span>><\/span>\n        <div<\/span> id=<\/span>&quot;pulser&quot;<\/span>></div><\/span>\n        <script><\/span>\n            function setHertz(ele) {\n                var hertz = ele.value;\n                document.getElementById('hertz').innerText = hertz;\n                var seconds = 1 / parseInt(hertz) / 2;\n                console.log(seconds)\n                document.getElementById('pulser').style.animationDuration = seconds + 's'\n            }\n        </script><\/span>\n    </body><\/span>\n</html><\/span>\n<\/pre><\/div>
Something like this? 10Hz
Something like this? > #pulser { width: 100%; height: 100%; background: red; animation-name: pulser; animation-duration: .005s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes pulser { 0% {background-color: red;} 49% {background-color: red;} 50% {background-color: white;} 100% {background-color: white;} } 10Hz
> body { margin: 0; } #controls { z-index: 10; position: absolute; } #pulser { position: absolute; width: 100%; height: 100%; background: red; animation-name: pulser; animation-duration: 0.05s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes pulser { 0% {background-color: red;} 49% {background-color: red;} 50% {background-color: white;} 100% {background-color: white;} }
10Hz

User: ded

Question: JS or CSS code for consistent flashing screen | BONUS for flickering flashlight

Back to question