This is the 29th day of my participation in Gwen Challenge. For details, see Gwen Challenge.

A flip is a familiar interactive effect, usually seen in a raffle. Is it possible to do a random flip without JavaScript? Flip effect is certainly no problem, CSS has no random function, today to share an alternative interactive implementation ideas.

CSS has no built-in “random” function, no math.random () function like Javascript, and no way to generate random numbers or random colors at all.

Based on the above problem, it is necessary to change the thinking and make the elements achieve random effects through complex animations. The idea is to make the cards appear in different states quickly, loop them through all 52 states in one second, and click on each card to pause the animation and flip the card.

Online Preview: Codepen. IO/Quintiontan…

The disadvantage of this scheme is that it is impossible to avoid three cards of the same suit and face

summary

The idea of using animations to make elements look random is not very interesting and somewhat surprising, and most users who see this effect will not be aware of the implementation of pure CSS.

Now CSS is so much more than what we see today, and what it can bring depends on creativity. I’ve always believed that there are no impossible interactions, only unexpected interactions.

The main points of

The effect is mainly used in the CSS animation property, customize an animation process randomAnim, click through the classic input checkbox + label combination, animation controller animation-play-state: Paused and animation – play – state: running; Below are the key steps().

Steps () is a timing-function that allows animations or transitions to be segmented, rather than continuous transitions from one state to another. This function takes two arguments:

  • The first argument is a positive value that specifies the number of segments I want the animation to split.
  • The second parameter is optional and can be set:start 和 end, indicating that a step change occurs at the beginning or end of each intervalend. For example,steps(1,start), the animation is divided into 1 step, and the part of the left endpoint is the beginning when the animation is executed;steps(1,end), the animation is divided into 1 step, and the part of the end point on the right side is the beginning when the animation is executed.

The step function (timing-function) is used between every two keyframes, not the entire animation.