Modifying CSS keyframes from angular 2 component
<p>I have an animation that fills a table cell with a color.  I want the animations keyframes <code>to.width</code> to be a variable that is controlled by an angular 2 component.  </p>

<p>CSS:</p>

<pre><code>#passing {
  display: block;
  height: 100%;
  background-color: #81C784;
  animation-duration: 2s;
  animation-name: slideright;
}

@keyframes slideright {
  from {
    margin-right: 0%;
    width: 0%;
  }
  to {
    margin-right: 50%;
    width: 50%;
  }
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="passing"
     [style.width.%]="cells[id].width"
     [style.keyframes.slideright.to.width.%]="cells[id].width"&gt;
&lt;/div&gt;
</code></pre>

<p>The <code>[style.width.%]</code> works fine but I want to do something like the above to set the animation width dynamically for each cell but I am not sure how to access that attribute.</p>