Css动画随机延迟答案

【问题标题】：Css animation random delayCss动画随机延迟
【发布时间】：2016-04-22 22:29:28
【问题描述】：

我正在尝试为一家漫画工作室构建一个网页，我希望其中一个角色每隔一段时间从侧面进来。到目前为止，我在 css 中有这个

        .charc {
            animation:peek 20s infinite;
            left:-500px
        }

        @-webkit-keyframes peek{
            1% {transform:translateX(-500px)}
            10%{transform:translateX(100px)}
            20% {transform:translateX(-200px)}
            100% {transform:translateX(-500px)}
        }

和html

<img src="character.jpg" class="charc"/>

这意味着角色一遍又一遍地出现。我不知道是否有可能在 CSS 中获得随机数字，但我想如果是的话，你们会知道的

附言我知道这只能在 chrome 中使用，但我很快就会改变它。

【问题讨论】：

使用js/jQuery随机重复动画。 css没有随机数生成器
代码是什么
Sass 有一个可以获取随机数的功能。
@NiZa 我为 LESS 做了一次类似的事情，让我的占位符多样化。它没有那么好。 :P 它只会在新的编译时改变，这对我来说很明显，但是在浏览器可以原生支持这些语言之前，使用预处理器来生成随机数是无用的。
澄清 NiZa 和 Joseph 所说的：Sass、LESS 等可以在构建样式表时生成一个随机数，但是一旦将生成的 CSS 传递给浏览器，它就是一个静态值。 OP 需要更改值，目前仍需要 Javascript。

标签： html css animation

【解决方案1】：

你需要为此使用 js/jQuery。

    function move() {
      $('.charc')
        .animate({
          left: '-500px'
        }, 200)
        .animate({
          left: '100px'
        }, 400)
        .animate({
          left: '50px'
        }, 400)
        .animate({
          left: '-500px'
        }, 100, function() {
          var nextIn = Math.floor(Math.random() * 1000);
          setTimeout('move()', nextIn);
        })
    }

    $(document).ready(function() {
      move();
    });

#scene {
  width: 500px;
  height: 100px;
  border: 2px solid black;
  margin: 20px;
}
.charc {
  position: absolute;
  left: -500px;
  top: 20px;
  width: 20px;
  height: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scene">
  <div class="charc"></div>
</div>

【讨论】：

【解决方案2】：

js 是可以的：

    var divElement = document.getElementsByClassName("charc")[0];
    var maxValue = 20; //the random value won't exceed 20s
    function randomTime(maxvalue){
      return Math.round(Math.random() * maxvalue );
    }
    function changeAnimationTime(maxValue){
       var random = randomTime(maxValue);
       divElement.style.animation = "peek "+randomTime+"s infinite";
       setTimeout(function(){
           changeAnimationTime(maxValue);
       },random);
    }

    changeAnimationTime(maxValue);

这种方法的优点是你不会使用 js 来做动画，而只是用来生成值。所以它消耗的资源更少。

【讨论】：

因为divElement是一个NodeList，无论是包含一种还是多种模式，都会报错，首先要在函数中指定使用哪个单节点，或者遍历提供的 NodeList。
你说得对大卫，我没有测试我的代码，坦率地说我使用了很多 jquery。这就是我忘记这样做的原因。
顺便说一句，您也可以使用 divElement.style.animationDuration = randomTime+"s" 或 divElement.style.animationDelay = randomTime+"s" 设置单个动画属性（取决于您要使用的风格）并将动画名称和迭代次数留给 CSS .

【解决方案3】：

不是随机延迟，但您可以使用我创建的名为 WAIT! Animate 的工具在动画之间添加暂停。这是您的动画，动画之间有 2 秒的停顿：

.peek.wait2.animated {
  animation: peek-wait2 22s linear infinite;
  transform-origin: 50% 50%
}
@keyframes peek-wait2 {
  0% { transform:translateX(-500px) }
  9.09091% { transform:translateX(100px) }
  18.18182% { transform:translateX(-200px) }
  90.90909% { transform:translateX(-500px) }
  100% { transform:translateX(-500px) }
}

使用WAIT! Animate 更改暂停持续时间。

PS。我建议从 0% 开始以避免动画闪烁。

【讨论】：

并没有真正回答这个问题（正如您所承认的），但您的动画计算器看起来非常有用。我特别喜欢您提供的示例动画；将为将来使用添加书签。