title: Pulse icon or element color for one minute with javascript/angularjs
body: <p>I would create a pulse color effect with a max duration of one minute. To have this effect with css I can do something like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>@-webkit-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  
  @-moz-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  
  @-o-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  
  @keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  
  .element {
    width: 50px;
    height: 50px;
    background: #ed8c55;
    -webkit-animation: pulse 3s infinite; /* Safari 4+ */
    -moz-animation:    pulse 3s infinite; /* Fx 5+ */
    -o-animation:      pulse 3s infinite; /* Opera 12+ */
    animation:         pulse 3s infinite; /* IE 10+, Fx 29+ */
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="element"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But in this one I can't control the time. Particularly, I would make this effect in an icon inside a button</p>
  
  <pre><code>&lt;md-button aria-label="Info" id="info" title="info" ng-click="openInfo()" class="md-icon-button"&gt;
    &lt;i class="zmdi zmdi-help red-color"&gt;&lt;/i&gt;
  &lt;/md-button&gt;
  </code></pre>
  
  <p>That <code>&lt;i /&gt;</code> element should pulse for max one minute in red color. Is this possible do it with angularjs or simply javascript?</p>