Css animation random delay

Question

I'm trying to build a webpage for a comic studio and I want one of the characters to come in from the side every so often. So far I have this in the 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)}
        }

and the html

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

This means the character comes on over and over again. I don't know whether it is possible to get random figures in CSS but I thought if it is, You guys would know

p.s. I know this will only work in chrome but I will be changing that soon.

Solution 1

You need to use js/jQuery for that.

    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>

Solution 2

It is possible with 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);

The advantage of this methode is that you won't use js for animation but just for generating values. So it consumes less ressources.

Solution 3

Not a random delay but you can use a tool I created called WAIT! Animate to add a pause between animations. Here's your animation with a 2 second pause between animations:

.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) }
}

Use WAIT! Animate to change the pause duration.

PS. I suggest starting at 0% to avoid a flicker in the animation.