title: When element receives class, change css on another element
body: <p><strong>Short description of what I want to accomplish:</strong></p>
  
  <p>Show and activate a css animation on a element when another element gets a class.</p>
  
  <p><strong>A little longer description:</strong></p>
  
  <p>When the li-element with the ID”widget-1” gets the class ”normal-opacity”, I want that the animations in the DIV ”animation-widget-1” to start.</p>
  
  <p>When the class ”normal-opacity” continues to the next li-element, ”widget-2”. I want to hide the previously animation (in this case the DIV ”animation-widget-1”) and instead show the animation that are linked with that current li-element (in this case widget-2).</p>
  
  <p>At last: when the class "normal-opacity" comes back to the first li-element, "widget-1", I want that the animations restarts.</p>
  
  <p><strong>HTML</strong></p>
  
  <p>A section with a list and a div containing hidden animations. </p>
  
  <pre><code>&lt;section id="widget-section"&gt;
      &lt;div class="function-content"&gt;
          &lt;ul class="function-list"&gt;
              &lt;li class="normal-opacity" id="widget-1"&gt;
                  &lt;div&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li id="widget-2"&gt;
                  &lt;div&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li id="widget-3"&gt;
                  &lt;div&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li id="widget-4"&gt;
                  &lt;div&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="animations"&gt;
          &lt;div class="animated bounceoutdown" id="animation-widget-1"&gt;
  &lt;i class="material-icons md-48 animated bounceindown"&gt;smartphone&lt;/i&gt;
  &lt;i class="material-icons md-48 animated bounceindown"&gt;email&lt;/i&gt;
  &lt;i class="material-icons md-48 animated bounceindown"&gt;chat_bubble_outline&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <p>The class ”normal-opacity” jumps down to the next li element in the list ”function-list”</p>
  
  <pre><code>$(function () {
      var lis = $("#widget-section .function-list&gt; li"),
          currentHighlight = 0;
      N = 6; //interval in seconds
      setInterval(function () {
          currentHighlight = (currentHighlight + 1) % lis.length;
          lis.removeClass('normal_opacity').eq(currentHighlight).addClass('normal_opacity');
      }, N * 1000);
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/*MAKES LI ELEMENT HAVE OPACITY 0.5*/
  
  .function-list li {
      opacity: 0.5;
  }
  
  .function-list .normal-opacity {
      opacity: 1;
  }
  
  
  /*HIDES THE ANIMATION*/
  
  .animations {
      visibility: hidden;
  }
  
  
  /*DECIDE WHEN ANIMATIONS WILL START*/
  
  #animation-widget-1 {
              animation-delay: 5s;
          }
  #animation-widget-1 i:first-child {
              animation-delay: 1s;
          }
  #animation-widget-1 i:nth-child(2) {
              animation-delay: 1.3s;
          }
  #animation-widget-1 i:last-child {
              animation-delay: 1.6s;
          }
  </code></pre>
  
  <p>I hope this question not are TO weird and that my description is fairly good.</p>
  
  <p>GIF of list-animation: <a href="http://gph.is/2o3L091" rel="nofollow noreferrer">Link to Giphy</a></p>
  
  <p>Please comment on solutions/tips and trix to solve this :)</p>