title: After changing element id's to element classes in div tag, keyframes no longer working
body: <p><strong>Hi Friends</strong></p>
  
  <p>I have a problem, In order to show multiple rows returned from logged in user, I had to convert my div id tags to div classes (both in my html and corresponding CSS). As a result, my key-frames within my CSS have stopped working. </p>
  
  <p><strong>My original html code</strong>:</p>
  
  <pre><code> //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 
         while($res = mysqli_fetch_array($result)) {     
          ?&gt;
              &lt;div id='loader-wrapper'&gt;
                  &lt;div id='loader'&gt;&lt;div id='loader1'&gt; 
                    &lt;/div&gt; 
                    &lt;/div&gt;
              &lt;p&gt;&lt;a  onclick='redirectFunction("&lt;?php echo $res['moduleID']; ?&gt;");'&gt;&lt;?php echo $res['moduleID']; ?&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;?php
          }
          ?&gt;
  </code></pre>
  
  <p><strong>My original CSS including keyframes:</strong></p>
  
  <pre><code> @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
      @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
      *, *:before, *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      html, body {
        height: 100vh;
      }
  
      body {
        color: #333;
        background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/39132/bg-stars.gif) repeat 0 0;
        overflow-x: hidden;
        height: 100%;
          font-family: sans-serif;
        font-weight: 100;
      }
  
  
      .wrapper {
        display: flex;
        min-height: 100%;
      }
  
      .sidebar {
        position: absolute;
        width: 220px;
      }
  
      .content {
        flex: 1;
        padding: 30px;
        background:  black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/39132/bg-stars.gif) repeat 0 0;
        box-shadow: 0 0 5px black;
        transform: translate3d(0, 0, 0);
        transition: transform .3s;
      }
  
      .content.isOpen {
        transform: translate3d(220px, 0, 0);
      }
  
      .button {
        cursor: pointer;
      }
  
      .button:before {
        content: '\f0c9';
        font: 42px fontawesome;
      }
  
      /* Demo Navigation */
      .title {
        font-size: 16px;
        line-height: 50px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 7px;
        color: #eee;
        border-bottom: 1px solid #222;
        background: #2a2a2a;
      }
  
      .nav li a {
        position: relative;
        display: block;
        padding: 20px 0 20px 50px;
        font-size: 12px;
        color: #eee;
        border-bottom: 1px solid #222;
      }
  
      .nav li a:before {
        font: 14px fontawesome;
        position: absolute;
        top: 19px;
        left: 20px;
      }
  
      .nav li:nth-child(1) a:before {
        content: '\f00a';
      }
  
      .nav li:nth-child(2) a:before {
        content: '\f012';
      }
  
      .nav li:nth-child(3) a:before {
        content: '\f0e8';
      }
  
      .nav li:nth-child(4) a:before {
        content: '\f0c3';
      }
  
      .nav li:nth-child(5) a:before {
        content: '\f022';
      }
  
      .nav li:nth-child(6) a:before {
        content: '\f115';
      }
  
      .nav li:nth-child(7) a:before {
        content: '\f085';
      }
  
      .nav li:nth-child(8) a:before {
        content: '\f023';
        left: 23px;
      }
  
      .nav li a:hover {
        background: #444;
      }
  
      .nav li a.active {
        box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
        background: #444;
      }
  
  
  
  
  
  
      /* Added background Gif, stars are glowing */
  
  
      .container{
        display: flex;
         flex-direction: row;
      }
      .container div:first-child(1){
        background-color:#ccffcc;
        flex: 1;
        height:100px;
        width:100px;
  
  
      }
      .first {
        -webkit-flex: 2;
                flex: 2:
  
      }
      .second {
        -webkit-flex: 2;
                flex: 2;
  
      }
      .third {
        -webkit-flex: 3;
                flex: 3;
      }
      #lnav{
        display:none;
      }
      #rnav{
        display:none;
      }
  
      .nav ul li a{
      text-decoration: none; 
        color:#b3e0ff;
        text-shadow: 0 0 15px #2187e7;
        border: 1px solid #b3e0ff;
         padding:10px;
        margin:10px;
         box-shadow: 0 0 5px #2187e7;
  
      }
  
  
  
      p{
        z-index: 999;
        margin-left:66px;
        font-size:46px;
        margin-top:-26px;
        color:#fff;/*4db8ff*/
        padding:0px;
        position:relative;
      -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
        -moz-animation: neon2 1.5s ease-in-out infinite alternate;
        animation: neon2 1.5s ease-in-out infinite alternate;
      text-shadow: 0 0 15px #b3e0ff;
  
      }
  
      p2{
        z-index: 999;
        margin-left:200px;
        font-size:42px;
        margin-top:-26px;
        color:#fff;/*4db8ff*/
        padding:0px;
        position:relative;
      -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
        -moz-animation: neon2 1.5s ease-in-out infinite alternate;
        animation: neon2 1.5s ease-in-out infinite alternate;
      text-shadow: 0 0 15px #b3e0ff;
  
      }
  
      p3{
        z-index: 999;
        margin-left:260px;
        font-size:42px;
        margin-top:-26px;
        color:#fff;/*4db8ff*/
        padding:0px;
        position:relative;
      -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
        -moz-animation: neon2 1.5s ease-in-out infinite alternate;
        animation: neon2 1.5s ease-in-out infinite alternate;
      text-shadow: 0 0 15px #b3e0ff;
  
      }
  
  
      #loader-wrapper{
          position: fixed;
          top: 200px;
          left:18%;
          width: 300px;
          height: 300px;
         margin-left:30px;
          float: left;
      }
  
       /* I have added more loader-wrapper's to add extra module nodes
      Loader wraooers are floating right instead of left &amp; margin has been changed*/   
      #loader-wrapper1{
          position: fixed;
          top: 200px;
          left:18%;
          width: 300px;
          height: 300px;
         margin-left:30px;
          float: right;
        margin-left: 360px;
  
      }
  
      #loader-wrapper2{
          position: fixed;
          top: 200px;
          left:18%;
          width: 300px;
          height: 300px;
         margin-left:30px;
          float: right;
        margin-left: 700px;
  
      }
  
  
      #loader {
          display: block;
          position: relative;
          left: 50%;
          top: 50%;
          width: 100%;
          height: 100%;
          margin: -175px 0 0 -175px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: #4db8ff;
        border-bottom-color: #b3e0ff;
        border-right-color: #66c2ff;
        border-left-color: #80ccff;
        box-shadow: 0 0 15px #2187e7;
  
          -webkit-animation: spin 30s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 30s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
  
      #loader1:before {
          content: "";
          position: absolute;
          top: 70px;
          left: 70px;
          right: 70px;
          bottom: 70px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-color: #4398ba;
  
          border-style:dotted;
  
          -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
  
      #loader1:after {
          content: "";
          position: absolute;
          top: 55px;
          left: 55px;
          right: 55px;
          bottom: 55px;
          border-radius: 50%;
          border-color: #59c1eb;
         border-width:5px;    
          border-style:double dashed solid dotted ;
        box-shadow: 0 0 40px #2187e7;
          -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
  
  
      #loader:before {
          content: "";
          position: absolute;
          top: 15px;
          left: 15px;
          right: 15px;
          bottom: 15px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-color: #1d5ca9;
  
          border-style:dotted;
  
          -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
  
      #loader:after {
          content: "";
          position: absolute;
          top: 25px;
          left: 25px;
          right: 25px;
          bottom: 25px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-color: #429bc0;
         border-width:5px;    
          border-style:dotted solid;
          -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
  
      @-webkit-keyframes spin {
          0%   {
              -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(0deg);  /* IE 9 */
              transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
          }
          100% {
              -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(360deg);  /* IE 9 */
              transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
          }
      }
      @keyframes spin {
          0%   {
              -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(0deg);  /* IE 9 */
              transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
          }
          100% {
              -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(360deg);  /* IE 9 */
              transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
          }
      }
  
  
      @-webkit-keyframes neon2 {
        from {
          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
        }
      }
  </code></pre>
  
  <p><strong>Here is the original output:</strong>
  <a href="https://i.stack.imgur.com/lfpcs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lfpcs.png" alt="Orginal output, only one row from multiple returned from logged in user is showing "></a></p>
  
  <p><strong>Here is what I changed the html code to:</strong></p>
  
  <pre><code>&lt;div class='loader-wrapper'&gt;
                  &lt;div class='loader'&gt;&lt;div class='loader1'&gt; 
                    &lt;/div&gt; 
                    &lt;/div&gt;
              &lt;p&gt;&lt;a  onclick='redirectFunction("&lt;?php echo $res['moduleID']; ?&gt;");'&gt;&lt;?php echo $res['moduleID']; ?&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And what I changed in the CSS:</strong></p>
  
  <pre><code>.loader-wrapper{
      position: fixed;
      top: 200px;
      left:18%;
      width: 300px;
      height: 300px;
     margin-left:30px;
      float: left;
  }
  
   /* I have added more loader-wrapper's to add extra module nodes
  Loader wrappers are floating right instead of left &amp; margin has been changed*/   
  .loader-wrapper1{
      position: fixed;
      top: 200px;
      left:18%;
      width: 300px;
      height: 300px;
     margin-left:30px;
      float: right;
    margin-left: 360px;
  
  }
  
  .loader-wrapper2{
      position: fixed;
      top: 200px;
      left:18%;
      width: 300px;
      height: 300px;
     margin-left:30px;
      float: right;
    margin-left: 700px;
  
  }
  
  
  .loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 100%;
      height: 100%;
      margin: -175px 0 0 -175px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #4db8ff;
    border-bottom-color: #b3e0ff;
    border-right-color: #66c2ff;
    border-left-color: #80ccff;
    box-shadow: 0 0 15px #2187e7;
  
      -webkit-animation: spin 30s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 30s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  
  .loader1:before {
      content: "";
      position: absolute;
      top: 70px;
      left: 70px;
      right: 70px;
      bottom: 70px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-color: #4398ba;
  
      border-style:dotted;
  
      -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  
  .loader1:after {
      content: "";
      position: absolute;
      top: 55px;
      left: 55px;
      right: 55px;
      bottom: 55px;
      border-radius: 50%;
      border-color: #59c1eb;
     border-width:5px;    
      border-style:double dashed solid dotted ;
    box-shadow: 0 0 40px #2187e7;
      -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  
  
  .loader:before {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-color: #1d5ca9;
  
      border-style:dotted;
  
      -webkit-animation: spin 18s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 18s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  
  .loader:after {
      content: "";
      position: absolute;
      top: 25px;
      left: 25px;
      right: 25px;
      bottom: 25px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-color: #429bc0;
     border-width:5px;    
      border-style:dotted solid;
      -webkit-animation: spin 60s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 60s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  </code></pre>
  
  <p><strong>Here is the output now, I am now outputting all rows returned from logged in user but my keyframes have stopped working</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/2hcRi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2hcRi.png" alt="Keyframes not working output"></a></p>
  
  <p>Any Idea where I've gone wrong?</p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <p><strong>Added my resulting html:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Homepage&lt;/title&gt;
  
    &lt;!--Cascasing stylesheets --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;style type="text/css"&gt;
    body {
    margin: 0;
    background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/39132/bg-stars.gif) repeat 0 0;
    font-family: sans-serif;
    font-weight: 100;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;!-- Encorporated module nodes, number 1 in readme.txt that is wrapped around number 5 from readme.txt which is the sidebar --&gt;
  
  &lt;body&gt;
    &lt;div class='wrapper'&gt;
    &lt;div class='sidebar'&gt;
      &lt;div class='title'&gt;
        Menu
      &lt;/div&gt;
      &lt;ul class='nav'&gt;
        &lt;li&gt;
          &lt;a href="index.php"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="index.php"&gt;Chat&lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li&gt;
          &lt;a&gt;Settings&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href='accounts/logout.php'&gt;Logout&lt;/a&gt;&lt;br/&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class='content isOpen'&gt;
      &lt;a class='button'&gt;&lt;/a&gt;
      &lt;!-- Session variables used from login functionality, number 9 of readme.txt--&gt;
       &lt;!-- With guidance from  http://blog.chapagain.com.np/crud-create-read-update-delete-php-mysql-login-register/ --&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          Welcome James ! &lt;a href='logout.php'&gt;Logout&lt;/a&gt;&lt;br/&gt;
          &lt;br/&gt;
          &lt;!-- &lt;a href='index.php'&gt;View and Add Products&lt;/a&gt; --&gt;
          &lt;div class="second"&gt;
  
                      &lt;div class='loader-wrapper'&gt;
                  &lt;div class='loader'&gt;&lt;div class='loader1'&gt; 
                    &lt;/div&gt; 
                    &lt;/div&gt;
              &lt;p&gt;&lt;a  onclick='redirectFunction("1");'&gt;1&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
                      &lt;div class='loader-wrapper'&gt;
                  &lt;div class='loader'&gt;&lt;div class='loader1'&gt; 
                    &lt;/div&gt; 
                    &lt;/div&gt;
              &lt;p&gt;&lt;a  onclick='redirectFunction("2");'&gt;2&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
                      &lt;div class='loader-wrapper'&gt;
                  &lt;div class='loader'&gt;&lt;div class='loader1'&gt; 
                    &lt;/div&gt; 
                    &lt;/div&gt;
              &lt;p&gt;&lt;a  onclick='redirectFunction("3");'&gt;3&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
          &lt;br/&gt;&lt;br/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  
      &lt;script  src="js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Do you have any idea how to get the values 1,2 &amp; 3 that are returned next to each-other in three different circles?</p>