Anwenden von Zufallswert auf Animation-Dauer mit jQuery

Question

Ich habe eine Seite, die 20 zufällige Größe div Elemente generiert und sie an zufälligen Orten innerhalb eines Div-Containers platziert. Mit CSS @ keyframe Animationen kann ich eine sehr einfache Skala und Farbanimation auf jedes Element anwenden.

Ich möchte die Animation-Dauer CSS-Eigenschaft auf eine zufällige Zahl für jedes Element festlegen. Ich habe versucht, dies mit der Methode jQuery.css zu tun.

element.css({ 'animation-duration': animationTime, 'animation-delay': animationTime });

aber das funktioniert nicht.

Irgendwelche Vorschläge?

Der vollständige Code ist unten - Beispiel ist bei http://codepen.io/CronanGogarty/pen/ZOexMN

.animationContainer { 
     width: 100%; 
     min-height: 400px; 
     height: 100%; 
     border: 1px solid #000; 
     overflow:hidden; 
    } 

    .animationElement { 
     position: absolute; 
     background-color: yellow; 
     animation: increase infinite; 
     animation-direction: alternate; 
    } 

    @keyframes increase { 
     0% { 
      border-radius: 100%; 
     } 

     50% { 
      background-color: orange; 
     } 

     100% { 
      transform: scale(2); 
      background-color: red; 
     } 
    } 

$(function() { 
     createRandomElements(); 
    }); 

    function createRandomElements() { 
     for (var i = 0; i < 20; i++) { 
      var dimensions = Math.floor(Math.random() * (60 - 10) + 10); 
      var width = $('.animationContainer').width(); 
      var height = $('.animationContainer').height(); 

      var eltop = Math.floor(Math.random() * (height - dimensions) + dimensions); 
      var elleft = Math.floor(Math.random() * (width - dimensions) + dimensions); 

      var animationTime = Math.floor(Math.random() * (5 - 2 + 1)) + 2; 

      var element = $('<div>', { 
       class: 'animationElement', 
       width: dimensions, 
       height: dimensions 
      }); 
      element.css({ 'animation-duration': animationTime, 'animation-delay': animationTime }); 
      element.offset({ top: eltop, left: elleft }); 
      $('.animationContainer').prepend(element); 
     } 
    } 

Als zusätzliche Frage Live - kann mir jemand erklären, warum die overflow:hidden Eigenschaft ist auf dem .animationContainer Element nicht funktioniert? Ich vermute, es liegt daran, dass die .animationElement-divs dem Container vorangestellt werden - wenn jemand eine Lösung hat, wäre ich sehr dankbar.

Answer 1

Die animation-delay und animation-time müssen einer Einheit zugeordnet werden. Verwenden Sie Folgendes, um dem Wert eine s (Sekunden) hinzuzufügen. Dies macht das CSS gültig.

element.css({ 
    'animation-duration': animationTime + 's', 
    'animation-delay': animationTime + 's' 
}); 

Als Bonus, müssen Sie die Animation-Container position: relative setzen, wenn Sie seine absolut positioniert Kinder versteckt werden soll.

Here's a fork of your pen with the changes.

Answer 2

Ich löste das overflow:hidden Problem durch Hinzufügen von position:relative zu diesem Element.