title: switching from @keyframe to tranistion animation doesn't work
body: <p>On loading state I have a <code>@keyframes</code> animation running.</p>
  
  <pre><code>@keyframes graph-line-loading {
    0% {
      transform: translateY(0%);
    }
  
    100% {
      transform: translateY(100%);
    }
  }
  </code></pre>
  
  <p>When I stop the animation <code>graph__line</code> <strong>jumps</strong> to <code>translateY()</code> value (set inline).</p>
  
  <p>However the <code>background-color</code> does nicely animate.</p>
  
  <p>I would expect transition property working on <code>transform</code> as well.</p>
  
  <pre><code>.graph__line {
    transition-property: transform, background-color;
  }
  </code></pre>
  
  <p>If the <code>background-color</code> is included in <code>@keyframes</code> animation it doesn't get transitioned on state change either.</p>
  
  <p>Seems like whatever property is animated in <code>@keyframes</code> gets ignored by transition property even though <code>@keyframes</code> is added via different class.</p>
  
  <p><strong>Plz check the fiddle.</strong></p>
  
  <p><a href="https://jsfiddle.net/LukaG/m4bzk6e3/" rel="nofollow noreferrer">https://jsfiddle.net/LukaG/m4bzk6e3/</a></p>
  
  <p>Any ideas?</p>