不均匀的 CSS 变换动画

Question

我正在尝试为我正在制作的启动页面创建流行的“飘落的雪/物体”图像。我有图像，它们轻轻地落下，但我无法得到均匀的“随机”传播到落下。它们落在明显的“团块”中。我知道这是由于用于创建它们的数学。我有一个数学学习障碍，这使得我不可能自己解决这个问题。有人可以查看我的代码并帮助我获得不那么均匀、不那么块状的花瓣掉落吗？看起来更自然的东西，就像一棵樱花树被吹散，一束花瓣散开并漂浮在启动页面上。

.petals {
  text-align: center;
}
.petals span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -219px 40px 54px -34px;
  background: #ff0000;
  background: url("http://www.cafenocturne.com/testpage/images/MiniPetal.png");
  -webkit-animation: petals 15s infinite linear;
  -moz-animation: petals 15s infinite linear;
  -o-animation: petals 15s infinite linear;
  animation: petals 15s infinite linear;
}
.petals span:nth-of-type(5n) {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.petals span:nth-of-type(5n+1) {
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
  -o-animation-delay: 1.3s;
  animation-delay: 1.3s;
}
.petals span:nth-of-type(5n+2) {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
.petals span:nth-child(3n) {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.petals span:nth-child(3n+1) {
  -webkit-animation-delay: 1.7s;
  -moz-animation-delay: 1.7s;
  -o-animation-delay: 1.7s;
  animation-delay: 1.7s;
}
.petals span:nth-child(3n+2) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.petals span:nth-child(7n) {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.petals span:nth-child(7n+1) {
  -webkit-animation-delay: 3.2s;
  -moz-animation-delay: 3.2s;
  -o-animation-delay: 3.2s;
  animation-delay: 3.2s;
}
.petals span:nth-child(7n+2) {
  -webkit-animation-delay: 3.9s;
  -moz-animation-delay: 3.9s;
  -o-animation-delay: 3.9s;
  animation-delay: 3.9s;
}
.petals span:nth-of-type(5n) {
  -webkit-animation-delay: 4.3s;
  -moz-animation-delay: 4.3s;
  -o-animation-delay: 4.3s;
  animation-delay: 4.3s;
}
.petals span:nth-of-type(5n+1) {
  -webkit-animation-delay: 4.7s;
  -moz-animation-delay: 4.7s;
  -o-animation-delay: 4.7s;
  animation-delay: 4.7s;
}
.petals span:nth-of-type(5n+2) {
  -webkit-animation-delay: 5.3s;
  -moz-animation-delay: 5.3s;
  -o-animation-delay: 5.3s;
  animation-delay: 5.3s;
}
.petals span:nth-child(3n) {
  -webkit-animation-delay: 5.5s;
  -moz-animation-delay: 5.5s;
  -o-animation-delay: 5.5s;
  animation-delay: 5.5s;
}
.petals span:nth-child(3n+1) {
  -webkit-animation-delay: 6.2s;
  -moz-animation-delay: 6.2s;
  -o-animation-delay: 6.2s;
  animation-delay: 6.2s;
}
.petals span:nth-child(3n+2) {
  -webkit-animation-delay: 6.8s;
  -moz-animation-delay: 6.8s;
  -o-animation-delay: 6.8s;
  animation-delay: 6.8s;
}
.petals span:nth-child(7n) {
  -webkit-animation-delay: 7.1s;
  -moz-animation-delay: 7.1s;
  -o-animation-delay: 7.1s;
  animation-delay: 7.1s;
}
.petals span:nth-child(7n+1) {
  -webkit-animation-delay: 7.7s;
  -moz-animation-delay: 7.7s;
  -o-animation-delay: 7.7s;
  animation-delay: 7.7s;
}
.petals span:nth-child(7n+2) {
  -webkit-animation-delay: 8.1s;
  -moz-animation-delay: 8.1s;
  -o-animation-delay: 8.1s;
  animation-delay: 8.1s;
}
.petals span:nth-child(9n) {
  -webkit-animation-delay: 8.6s;
  -moz-animation-delay: 8.6s;
  -o-animation-delay: 8.6s;
  animation-delay: 8.6s;
}
.petals span:nth-child(9n+1) {
  -webkit-animation-delay: 9.2s;
  -moz-animation-delay: 9.2s;
  -o-animation-delay: 9.2s;
  animation-delay: 9.2s;
}
.petals span:nth-child(9n+2) {
  -webkit-animation-delay: 9.8s;
  -moz-animation-delay: 9.8s;
  -o-animation-delay: 9.8s;
  animation-delay: 9.8s;
}
.petals span:nth-child(11n) {
  -webkit-animation-delay: 10.3s;
  -moz-animation-delay: 10.3s;
  -o-animation-delay: 10.3s;
  animation-delay: 10.3s;
}
.petals span:nth-child(11n+1) {
  -webkit-animation-delay: 10.7s;
  -moz-animation-delay: 10.7s;
  -o-animation-delay: 10.7s;
  animation-delay: 10.7s;
}
.petals span:nth-child(11n+2) {
  -webkit-animation-delay: 11.1s;
  -moz-animation-delay: 11.1s;
  -o-animation-delay: 11.1s;
  animation-delay: 11.1s;
}
@-webkit-keyframes petals {
  0% {
    width: 19px;
    height: 19px;
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotateZ(0deg) rotateY(0deg);
  }
  75% {
    width: 19px;
    height: 19px;
    opacity: 1;
    -webkit-transform: translate(200px, 800px) rotateZ(270deg) rotateY(270deg);
  }
  100% {
    width: 19px;
    height: 19px;
    opacity: 0;
    -webkit-transform: translate(350px, 1000px) rotateZ(360deg) rotateY(360deg);
  }
}
@-moz-keyframes petals {
  0% {
    width: 19px;
    height: 19px;
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotateZ(0deg) rotateY(0deg);
  }
  75% {
    width: 19px;
    height: 19px;
    opacity: 1;
    -webkit-transform: translate(200px, 800px) rotateZ(270deg) rotateY(270deg);
  }
  100% {
    width: 19px;
    height: 19px;
    opacity: 0;
    -webkit-transform: translate(350px, 1000px) rotateZ(360deg) rotateY(360deg);
  }
}

<div class="petals">
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

,

Answer 1

最简单的方法是使用 js 为每个花瓣随机生成动画延迟（使用 jquery 的示例，抱歉格式错误）：

  function getRandomInt(min, max){


return Math.floor(Math.random() * (max - min + 1)) + min;
}



$(".petals span").each(function() {

var delay = getRandomInt(1, 100) / 10
$(this).css("animation-delay", delay + "s");

});

Demo