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, но я подумал, что если это так, вы, ребята, знаете

p.s. Я знаю, что это будет работать только в хроме, но я скоро это изменил.

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>

Answer 2

Можно с ЯШАМИ:

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

Преимуществом этого Methode является то, что вы не будете использовать JS для анимации, но только для генерации значений. Таким образом, он потребляет меньше ресурсов.

Answer 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%, чтобы избежать фликкера в анимации.