CSS动画随机延迟

Question

我正在尝试为漫画工作室构建一个网页，我希望其中一个角色经常从侧面出现。到目前为止我在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 中获取随机数字，但我想如果可以的话，你们会知道的

ps 我知道这只能在 Chrome 中使用，但我很快就会改变这一点。

Answer 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>