title: Transition doesn't work with border-image and gradient
body: <p>I am using <code>border-image</code> with <code>gradient</code> and it works fine, but it seems <code>transition</code> is not supported for it. </p>
  
  <p>Is it possible to achieve <code>transition</code> on hover for this example?</p>
  
  <p><a href="https://jsfiddle.net/et0ffrqx/" rel="nofollow"><strong>JsFiddle</strong></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      border:10px solid blue;
      height:120px;
      float:left;
      transition:1s all;
      border-image: linear-gradient(to bottom, white, blue) 1 100%;
  }
  div:hover {
      border-image: linear-gradient(to bottom, skyblue, blue) 1 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>