How to start and remove a multistep animation while calling start() and stop() in the console using Javascript?
<p><a href="http://i.stack.imgur.com/0nWf1.png" rel="nofollow">start</a>
I have written following code for multistep animation. But I want to get result as shown in above screenshot. i.e., only the black vertical bar would be shown once the webpage is launched.<a href="http://i.stack.imgur.com/OAuzt.png" rel="nofollow">stop</a>. then as shown in the screenshot if I run a start() at console it should run the animation and if I run stop() at console it should be back to vertical bar. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;style&gt;
   $max: 100px;

.equilizer {
  height: $max;
  width: $max;
  transform: rotate(180deg);
}

.bar {
  fill: DeepPink;
  width: 18px;
  animation: equalize 1.25s steps(25, end) 0s infinite;
}

.bar:nth-child(1) { 
  animation-duration: 1.9s;
}

.bar:nth-child(2) { 
  animation-duration: 2s;
}

.bar:nth-child(3) { 
  animation-duration: 2.3s;
}

.bar:nth-child(4) { 
  animation-duration: 2.4s;
}

.bar:nth-child(5) { 
  animation-duration: 2.1s;
}

@keyframes equalize {
  0% {
    height: 60px;
  }
  4% {
    height: 50px;
  }
  8% {
    height: 40px;
  }
  12% {
    height: 30px;
  }
  16% {
    height: 20px;
  }
  20% {
    height: 30px;
  }
  24% {
    height: 40px;
  }
  28% {
    height: 10px;
  }
  32% {
    height: 40px;
  }
  36% {
    height: 60px;
  }
  40% {
    height: 20px;
  }
  44% {
    height: 40px;
  }
  48% {
    height: 70px;
  }
  52% {
    height: 30px;
  }
  56% {
    height: 10px;
  }
  60% {
    height: 30px;
  }
  64% {
    height: 50px;
  }
  68% {
    height: 60px;
  }
  72% {
    height: 70px;
  }
  76% {
    height: 80px;
  }
  80% {
    height: 70px;
  }
  84% {
    height: 60px;
  }
  88% {
    height: 50px;
  }
  92% {
    height: 60px;
  }
  96% {
    height: 70px;
  }
  100% {
    height: 80px;
  }
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128"&gt;
  &lt;g&gt;
    &lt;title&gt;Audio Equilizer&lt;/title&gt;
    &lt;rect class="bar" transform="translate(0,0)" y="15"&gt;&lt;/rect&gt;
    &lt;rect class="bar" transform="translate(25,0)" y="15"&gt;&lt;/rect&gt;
    &lt;rect class="bar" transform="translate(50,0)" y="15"&gt;&lt;/rect&gt;
    &lt;rect class="bar" transform="translate(75,0)" y="15"&gt;&lt;/rect&gt;
    &lt;rect class="bar" transform="translate(100,0)" y="15"&gt;&lt;/rect&gt;
  &lt;/g&gt;
&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Now by default the animation should be in stop mode. How will I proceed for this using simple JavaScript (I am recommended to not to use any external frameworks/libraries except simple HTML,CSS and JAVASCRIPT).</p>