CSS tips for random numbers in CSS

Recently, I stumbled across an interesting question. I want to randomly set the value of the animation-duration. This is a non-random example:

This is an animation I wrote in CSS:

@keyframes Flicker {  0% {    opacity:1;  }  100% {    opacity:0;  }} #red {  animation:flicker 2s ease alternate infinite;}

Currently working well. But there is no randomization, and the animation execution time is fixed at 2s.

The animation I want is a random number within 2s of the execution time. The effect I want is this:

. element {  animation:flicker $randomNumber alternate Infinite;}

The $randomnumber here is a random number generated by a particular function.

A CSS preprocessor, such as sass, provides a function like this:

$randomNumber: Random (5);. Thing {  animation-duration: $randomNumber + S;}

This may be what you want, but it's not what I want. There is an obvious flaw in the process of generating random numbers from the preprocessor:

In sass, the random number generation process is like selecting a name from a story, which is taken out randomly after it is written, and then it does not change. -jake Albaugh (@jake_albaugh) December 29, 2016

In other words, once the CSS preprocessor executes, the randomization process is over, and the resulting random number is permanently fixed to a value (that is, it will not regenerate until the CSS preprocessor runs again.) ）

It does not produce random numbers when JavaScript is running, like random functions in JavaScript, such as Math.random ().

In the deep regret, I also realized that this is a perfect opportunity to use CSS variables (CSS's own properties)! Although it's not easy to use it to generate random numbers, they can still help us.

If you're not familiar with them, then don't worry. In fact, the CSS variable is its own function, and is different from the CSS preprocessor you are already familiar with such as sass and less variables. Refer to the many benefits Chris has listed here:

You use them instead of using preprocessing.

They are cascaded. You can either set the value of the variable in any selector or overwrite the current variable reference.

When their values change (such as media queries or other state changes), the browser will be re-rendered.

You can access them and manipulate them using JavaScript.

The last point is important to us. We generate random numbers in JavaScript and then set the generated values to the CSS variables.

Set a CSS custom property and give it a default value (this is useful if JavaScript fails for some reason when writing a value):

/* Set the default animation execution time */:root {  --animation-time:2s;   }

Now we can use this variable in CSS:

#red {  animation:flicker var (--animation-time) ease alternate infinite;  }

Words don't say much, we begin at once. Although this looks like one of the previous SVG animations, this one is written using CSS variables. You can change the value of the variable to test how it works. and preview the effect in real time.

Now we use JavaScript to access and manipulate this variable:

var time = Math.random ();

Here we can find the red circle created using SVG and use SetProperty to change the value of--animation-time.

var red = document.queryselector (' #red '); Red.style.setProperty ('--animation-time ', time + ' s ');

Look at this! A random number has been set to the SVG animation element:

Look at this Robin Rendle (@robinrendle) written on the Codepen example CSS random number #.

This is a lot better than the previous one because its value is the random number generated by the JavaScript runtime, and it changes every time. This succeeds in achieving the results we want, but we have some difficulty doing this: Animation-duration a random number at run time.

Fortunately, we can now use JavaScript, and we can update the value of the custom variable according to what we want. This is an example of the value we update animation-duration per second:

var red = document.queryselector (' #red '), function SetProperty (duration) {  Red.style.setProperty ('-- Animation-time ', duration + ' s ');} function Changeanimationtime () {  var animationduration = Math.random ();  SetProperty (animationduration);} SetInterval (changeanimationtime, 1000);

This is exactly what I wanted: watch this Robin Rendle (@robinrendle) Write the example CSS random number # # on Codepen.

Remember, however, that the support for CSS variables (custom properties) is still not very good, so be careful when using them. We can implement a progressive animation like this:

#red {  animation:flicker. 5s ease alternate infinite;  Animation:flicker var (--animation-time) ease alternate infinite;}

If the CSS variable is not supported, we can see part of the animation, although it is not the perfect look in my mind.

Fortunately, CSS variables are not the only way we generate animation-duration random values. We can use JavaScript to manipulate the DOM to directly set the value to the style:

var red = document.queryselector (' #red '); red.style.animationDuration = Math.floor (Math.random () * 5 + 1) + "s";

We can even wait for the animation to complete before setting a new time, if we want to have such an effect:

var red = document.queryselector (' #red '); function setrandomanimationduration () {  red.style.animationDuration = Math.floor (Math.random () * + 1) + "s";} Red.addeventlistener ("Animationiteration", setrandomanimationduration);

Here are just a few examples of possible ways to achieve this, and you can use EQCSS to achieve this effect:

@element ' #animation ' {  . Element {    animation-duration:eval (' rand ') s;  }}

var rand = Math.random (); Eqcss.apply ();

Do you want the CSS itself to produce the correct random number? I have not seen the relevant information so far. Even if there is, I may have to be able to really use it for a while.

