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; }
#red { animation: flicker var(--animation-time) ease alternate infinite; }
var time = Math.random();
var red = document.querySelector('#red'); red.style.setProperty('--animation-time', time +'s');
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);
#red { animation: flicker .5s ease alternate infinite; animation: flicker var(--animation-time) ease alternate infinite;}
var red = document.querySelector('#red'); red.style.animationDuration = Math.floor(Math.random() * 5 + 1) + "s";
var red = document.querySelector('#red'); function setRandomAnimationDuration() { red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s"; } red.addEventListener("animationiteration", setRandomAnimationDuration);
@element '#animation' { .element { animation-duration: eval('rand')s; }}
var rand = Math.random();EQCSS.apply();