Astuces CSS : nombres aléatoires en CSS

Récemment, j'ai rencontré un problème intéressant par accident. Je souhaite définir la valeur de durée d'animation de manière aléatoire. Voici un exemple non aléatoire :

C'est une animation que j'ai écrite en CSS :

@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#red {
  animation: flicker 2s ease alternate infinite;
}

Elle fonctionne actuellement bien. Mais il n'y a pas de randomisation ici, ni le temps d'exécution de l'animation. est fixé à 2s.

L'animation que je souhaite est un nombre aléatoire dont le temps d'exécution est inférieur à 2 secondes. L'effet que je souhaite est le suivant :

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

Le $randomNumber ici est un nombre aléatoire généré par une fonction spécifique.

Les préprocesseurs CSS tels que Sass fournissent une telle fonction :

$randomNumber: random(5);

.thing {
  animation-duration: $randomNumber + s;
}

C'est peut-être ce que vous voulez, mais ce n'est pas ce que je veux. Le préprocesseur génère de l'aléatoire. Il y a un défaut évident. le processus de numérotation :

Sass中，随机数生成过程就像是从一个故事中选择名字的过程，它仅仅在写完之后随机取出，然后它就不再变化了。
— jake albaugh (@jake_albaugh) 2016年12月29日

En d'autres termes, une fois le préprocesseur CSS exécuté, le processus de randomisation est terminé et le nombre aléatoire généré sera fixé à une valeur pour toujours (c'est-à-dire qu'il ne le sera pas. être régénéré jusqu'à ce que le préprocesseur CSS soit à nouveau exécuté.)

Ce n'est pas comme la fonction aléatoire de JavaScript (telle que Math.random()) qui génère des nombres aléatoires lorsque JavaScript est en cours d'exécution.

Bien que profondément désolé, j'ai également réalisé que c'était l'occasion idéale d'utiliser des variables CSS (les propres propriétés de CSS) ! Même si l’utiliser pour générer des nombres aléatoires n’est pas une tâche facile, ils peuvent quand même nous aider.

Si vous ne les connaissez pas, ne vous inquiétez pas. En fait, les variables CSS sont intégrées et sont différentes des variables que vous connaissez déjà des préprocesseurs CSS comme SASS et LESS. Découvrez les nombreux avantages que Chris énumère ici :

● Vous pouvez les utiliser sans utiliser de prétraitement.

●Ils sont en cascade. Vous pouvez définir la valeur de cette variable ou remplacer la référence de variable actuelle dans n'importe quel sélecteur.

● Lorsque leurs valeurs changent (comme des requêtes multimédias ou d'autres changements d'état), le navigateur sera à nouveau rendu

● Vous pouvez y accéder et les manipuler à l'aide de JavaScript.

Le dernier point est important pour nous. Nous générons des nombres aléatoires en JavaScript et définissons les valeurs générées sur des variables CSS.

Définissez une propriété personnalisée CSS et attribuez-lui une valeur par défaut (cela est utile en cas d'échec de JavaScript pour une raison quelconque lors de l'écriture de la valeur) :

/* 设置默认的动画执行时间 */
:root {
  --animation-time: 2s; 
  }

Nous pouvons maintenant utiliser cette variable dans CSS comme ceci :

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

Sans plus tarder, commençons immédiatement. Bien que celle-ci ressemble à l'une des animations SVG précédentes, celle-ci est écrite à l'aide de variables CSS. Vous pouvez modifier la valeur de la variable pour tester son fonctionnement. Et prévisualisez l’effet en temps réel.

Maintenant, nous utilisons JavaScript pour accéder et manipuler cette variable :

var time = Math.random();

Ici, nous pouvons trouver le cercle rouge créé à l'aide de SVG et modifier la valeur de --animation-time à l'aide de setProperty.

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

Regardez ici ! Un nombre aléatoire a été défini pour l'élément d'animation SVG :

Regardez cet exemple CSS Random Number #3 écrit par Robin Rendle (@robinrendle) sur CodePen .

Il s'agit d'une grande amélioration par rapport au précédent car sa valeur est un nombre aléatoire généré lors de l'exécution de JavaScript, et il change à chaque fois. Cela permet d'obtenir l'effet souhaité, mais nous avons encore un peu de mal à le faire : animation périodique-durée d'un nombre aléatoire au moment de l'exécution

Heureusement, nous pouvons maintenant utiliser JavaScript, nous La valeur d'une variable personnalisée. peut être mis à jour selon ce que nous voulons. Voici un exemple où nous mettons à jour la valeur de animation-duration chaque seconde :

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);

C'est exactement ce que je veux : Découvrez cet exemple de nombres aléatoires CSS #4 par Robin Rendle (@robinrendle) sur CodePen.

Mais rappelez-vous, la prise en charge des variables CSS (attributs personnalisés) n'est toujours pas très bonne, alors soyez prudent lorsque vous les utilisez. Nous pouvons implémenter une animation d'amélioration progressive comme celle-ci :

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

Si les variables CSS ne sont pas prises en charge, nous pouvons également voir une partie de l'animation, même si ce n'est pas l'aspect parfait à mon avis.

---

Heureusement, les variables CSS ne sont pas le seul moyen de générer des valeurs aléatoires de durée d'animation. Nous pouvons utiliser JavaScript pour manipuler le DOM et définir la valeur directement sur le style :

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

Nous pouvons même attendre la fin de l'animation avant de définir une nouvelle heure, si nous voulons un tel effet :

var red = document.querySelector('#red');

function setRandomAnimationDuration() {
  red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s";
}

red.addEventListener("animationiteration", setRandomAnimationDuration);

---

Ceci n'est qu'une liste de façons possibles d'y parvenir. Vous pouvez également utiliser EQCSS pour obtenir cet effet :

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

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

---

Voulez-vous. CSS lui-même pour pouvoir le faire ? Générer des nombres aléatoires corrects ? Je n'ai vu aucune information pertinente jusqu'à présent. Même s'il y en a, cela peut me prendre un certain temps avant de pouvoir réellement l'utiliser.