Source Code:
(back to article)
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> #digitId { width: .6em; overflow: hidden; font: 36px monospace; cursor: pointer; } #stripeId { display: inline-block } #stripeId.animate { transform: translate(-90%); transition-property: transform; transition-duration: 6s; transition-timing-function: steps(9, start); } </style> </head> <body> Click: <div id="digitId"> <div id="stripeId">0123456789</div> </div> <script> digitId.onclick = function() { stripeId.classList.add('animate'); } </script> </body> </html>
Result:
Report an issue