Creating randomness with pure CSS
These cards were made using HTML and CSS only, no JavaScript , no Sass and no other external scripts or preprocessors involved.
Every time you click on a card, it draws a different one, sometimes it’s a King of Hearts, sometimes it’s an Ace of Spades, sometimes it’s even a 9 of diamonds or any other card in a standard deck of cards.
Let me get that out of the way first — CSS has no built-in “random” function, no Math.random() equivalent and no way to generate a random number or a random color at all.
So what is going on here?
Elements cannot act randomly in CSS because we have no random function to control them with, but elements can still appear to act randomly by using an intricate form of animation.
The cards in the example above animate through the different states very fast, and the user’s click on each card pause the animation, making the card flip at any one of certain states.
The user can click on the cards at any time, but the animation is so fast it acts as a random seed for our interaction, these cards for example cycle through all 52 states in only 1 second.
This is what I like to call Schrödinger’s Animation as elements are at both state at the same time and only by interaction we make them collapse into a definitive state of being.
I fondly call it Schrödinger’s Animation after the Austrian physicist who came up with the thought experiment in quantum physics (the experiment is known as Schrödinger’s cat).
In Schrödinger’s experiment the cat is both alive and dead at the same time while only a closer inspection (user interaction) can make it stay in one of the two states.
Schrödinger’s trick is exactly what we’re using, we’re making the animation really fast so the user can’t even see the individual frames, and than a user interaction will pause the animation.
Schrödinger’s trick is exactly what we’re using, we’re making the animation really fast so the user can’t even see the individual frames, and than a user interaction will pause the animation.
This trick is especially handy if you’re able to hide the mechanism itself, if you hide the animation, like our flipped cards or our chickens (the Codepen at the end of this article), then the user will never think of trying to time it, unlike a slot machine, which can be pulled in exactly the right moment.
Even if the user would try to time it, the animation between the different states is so fast it’s almost impossible to time correctly.
Why using random in pure CSS and not JavaScript?
This way of randomizing has a few key advantages:
- it’s fun and whimsical.
- As a CSS developer, you don’t always have access to the JavaScript code and using this trick, you don’t have to.
- It’s not a well-known method, which means neither your teammates nor your users will understand what’s going on, users won’t be able to game this system as easily and as a bonus — you can drive other developers in your team crazy trying to debug it.
Neither your teammates nor your users will understand what’s going on, users won’t be able to game this system as easily and as a bonus — you can drive other developers in your team crazy trying to debug it.
Summary
This trick of using Animation to make elements appear to act randomly is fun, it’s unexpected and is surely something most people don’t realize is possible using only pure CSS.
CSS is much more than what meets the eye, it’s about being creative, both visually and programmatically, that’s why it’s so fun for me and hopefully for you too.
If you liked this article and want to see more unexpected tricks in CSS, please follow me on twitter (@adircode) and thank you for reading.
