CSS技巧之CSS中的随机数

这是我用CSS写的一个动画:

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

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

目前工作良好. 但是这里没有随机化，动画执行时间固定为2s。

我想要的动画是执行时间是2s以内的随机数。我想要的效果是这样的:

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

这里的$randomNumber是一个通过特定函数生成的随机数。

CSS预处理器如Sass提供了这样的一个函数:

$randomNumber: random(5);

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

这可能是以你想要的，但却不是我想要的，预处理器生成随机数过程中有一个明显的缺陷：

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

换句话说，一旦CSS预处理器执行完毕，随机化的过程就结束了，生成得到随机数也就永远的固定为一个值（也即直到CSS预处理器再次运行的时候才会重新生成。）

它不像JavaScript里边的随机函数（如Math.random()）一样在JavaScript运行的时候产生随机数。

在深表遗憾的同时，我也意识到这是一个使用CSS变量（CSS的自有属性）的完美的机会！虽然，使用它来生成随机数并不是一件容易的事，但是，它们仍然可以帮助到我们。

如果你不熟悉它们，那么也别担心。事实上CSS变量是它自带的功能, 并且不同于你已经熟悉的CSS预处理器比如SASS和LESS的那种变量。参考Chris在这里列举的许多好处:

●你可是使用它们而不需要使用预处理。

●它们是级联的。你可以在任何一个选择器里边设置这个变量的值或者覆盖当前的变量指。

●当它们的值改变 (例如媒体查询或者其它的状态变化), 浏览器将会重新渲染.

●你可以访问它们并且可以使用JavaScript操纵它们.

最后一点对于我们来说是重要的。我们在JavaScript中生成随机数，再把生成的值设置到CSS变量上。

设置一个CSS自定义属性, 并且给它一个默认值(万一JavaScript在写值的时候由于一些原因失败的时候这是很有用的):

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

现在我们可以这样在CSS中使用这个变量:

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

话不多说, 我们立即开始。 尽管这个看起来像之前的一个SVG动画, 但这一个是使用CSS变量写的. 你可以改变变量的值去测试它的工作方式。并且实时预览效果。

现在我们使用JavaScript来访问和操作这个变量：

var time = Math.random();

在这里我们可以找到使用SVG创建的红色的圆圈并且使用setProperty改变--animation-time 的值。

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

看这里!一个随机数已经被设置到了SVG动画元素上了:

看这个Robin Rendle (@robinrendle)写在CodePen上的例子CSS随机数#3。

这比起之前的有了很大的进步因为它的值是JavaScript运行时产生的随机数，它每一次都在变化。 这成功实现了我们想要的效果, 但做到这一点我们还有些困难: 在运行时定期的animation-duration一个随机数.

幸运地是，我们现在可以用JavaScript了，我们可以根据我们想要的更新自定义变量的值。这是一个我们每秒更新animation-duration的值的例子：

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

这正是我想要的: 看这个Robin Rendle (@robinrendle)写在CodePen上的例子CSS随机数#4。

不过得记住一点，CSS变量（自定义属性）的支持性仍然不是太好，因此使用时要当心。 我们可以实现一个像这样的渐进增强的动画:

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

如果CSS变量没有得到支持我们也能看到部分的动画, 虽然它并不是我心目中的完美的样子.

值得庆幸的是，CSS变量并不是我们生成animation-duration随机值的唯一途径。我们可以使用JavaScript操作DOM直接设值到style上:

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

这里只是列举了实现这个的可能途径,你也可以使用EQCSS来实现这个效果：

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

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

你是否希望CSS本身自己就能够产生正确的随机数? 我目前为止没有看到相关的资料. 即使有，我可能也得过一段时间才能够真正的使用它.