乱数ジェネレータでCSSの属性値を変更する

Question

animation-duration属性を以下のCSSコードでランダムに（0から1に）変更しようとしています。

@keyframes blink { 
    50% { border-color: #ff0000; } 
} 
p{ 
    animation-name: blink ; 
    animation-duration: 0.1s ; 
    animation-timing-function: step-end ; 
    animation-iteration-count: infinite ; 
    animation-direction: alternate ; 
} 

HTML

<div id="label_div"> 
    <p id="label" class = "blink">Player #</p > 
</div> 

ませんJavascriptがこれまでに使用し、私はそれを使用するために開いています。 これを行うにはどうすればよいですか？私はthis questionを見ましたが、私の問題を解決する方法を理解できませんでした。

Answer 1

あなたのアニメーションは、私のために働いていませんが、私は、これは0-1の間の数を返します

const label = document.querySelector("p"); 
label.style.animationDuration = Math.random() + "s"; 

Math.random()を動作するはずだと思います。 http://www.w3schools.com/jsref/jsref_random.asp

ところで、あなたのアニメーションを修正するだけで、あなたのpのCSSにborder: solid #000;を追加

Answer 2

使用して0とあなたのアッパー期限の間の乱数を決定します。関数内でそのコードを入れて

var rnd = Math.Random() + UPPERLIMIT; 

、計算されたランダム遅延の後に自身を実行させます：

function randomTimer(){ 
    var rnd = Math.Random() + UPPERLIMIT; 
    setTimeout(randomTimer, rnd); 
} 

次に、 yサイクルごとに要素への遅延。

function randomTimer(){ 
    var rnd = Math.Random() + UPPERLIMIT; 
    var el = document.querySelector("p"); 
    el.style.animationDuration = rnd + "s"; 
    setTimeout(randomTimer, rnd); 
} 

これにより、アニメーションは毎回無作為に繰り返されます。