title: How to animate a radial-gradient using CSS?
body: <p>I am trying to create a radial-gradient shine affect to a div box and I am unsure whats the best way of doing so. I Have found no resources of achieving what I want to achieve; just shine affects which look like overlay.</p>
  
  <p>Most of the examples I have found looks like this <a href="http://jsfiddle.net/nqQc7/512/" rel="noreferrer">http://jsfiddle.net/nqQc7/512/</a>.</p>
  
  <p>Below I have displayed what I am trying to create. </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-css lang-css prettyprint-override"><code>#shine-div {
    height: 30vh;
    width: 60vw;
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;
    /*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    animation: colorChange 5s infinite;
  }
  
  @keyframes colorChange {
    0% {
      background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
    }
    50% {
      background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
    }
    100% {
      background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="shine-div"&gt;
    Shine
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it possible to do this? I'd also like to make the white shine on top to go from left to right smoothly? Am I even on the right track with my attempt?</p>