Cssアニメーションランダム遅延

Question

私は漫画スタジオ用のWebページを作成しようとしています。これまでのところ、私は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

それは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); 

このMethodeのの利点は、あなたがアニメーションのためにちょうど値を生成するためのJSを使用しないことです。したがって、リソースの消費が少なくなります。

Answer 3

ランダムな遅延ではありませんが、WAIT! Animateと呼ばれる作成したツールを使用して、アニメーションの間に一時停止を追加することができます。

.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を使用します。ここでは、アニメーションの間に2秒間のポーズとアニメーションです。

PS。アニメーションのちらつきを避けるため、0％から開始することをお勧めします。