Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You're trying to apply <code>.css()</code> to a string of <code>text</code>, which is your problem area as <code>css()</code> only works on DOM objects.The other thing is you were putting <code>text</code> in the DOM after your loop is completed, so any of your css had already been completed in the loop. I changed it so you're appending the html to the <code>$('#cont')</code> object in the loop so it can be manipulated. </p> <p>You can see the fiddle here: <a href="http://jsfiddle.net/FMBNc/3/" rel="nofollow">http://jsfiddle.net/FMBNc/3/</a></p> <p>Also created an alternate where you're only applying the animation-delay and declaring the rest of the animation in the CSS document: <a href="http://jsfiddle.net/FMBNc/4/" rel="nofollow">http://jsfiddle.net/FMBNc/4/</a></p> <pre><code>var text = $("#cont"); //changed to just the object var count = 1; var before = 0; var after = 0; var counter = ""; for (var i = 1; i &lt;= 20; i++) { for (var j = 1; j &lt;= 5; j++) { counter = before + "." + after; after += 2; //putting the html object in the DOM so it can be manipulated by .css() text.append("&lt;div class='ball' id='ball" + count + "'&gt;&lt;/div&gt;"); $("#ball" + count).css({ "-webkit-animation": "ball 3.5s linear " + counter + "s infinite", "-moz-animation": "ball 3.5s linear " + counter + "s infinite", "-ms-animation": "ball 3.5s linear " + counter + "s infinite", "-o-animation": "ball 3.5s linear " + counter + "s infinite", "animation": "ball 3.5s linear " + counter + "s infinite" }); count++; } after = 0; before++; } </code></pre> <p>Also, you don't need <code>normal</code> in your CSS declaration as it's a default. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload