How to animate a radial-gradient using CSS?

Question

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.

Most of the examples I have found looks like this http://jsfiddle.net/nqQc7/512/.

Below I have displayed what I am trying to create.

#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%)
  }
}

<div id="shine-div">
  Shine
</div>

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?

Answer 1

Using CSS variables and with the new @property we can easily animate radial-gradient (or any kind of gradient). The support cover only Chrome and Edge for now.

@property --x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

#shine-div {
  height: 30vh;
  width: 60vw;
  margin: auto;
  border-radius: 10px;
  background: radial-gradient(ellipse farthest-corner at var(--x) 0%, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  0% {
    --x:0%;
  }
  50% {
    --x:50%;
  }
  100% {
    --x:100%;
  }
}

<div id="shine-div"></div>

All we have to do is to define the position using a variable --x that will use percentage values and we animation that variable. As simple as that!

Answer 2

SVG solution

The author did not ask for a solution to his problem using SVG. But it will probably be useful to solve one issue in several ways.
Gradient attribute values were taken from the @Temani Afif response.
The SVG radial gradient formula for this question:

<radialGradient id="radGrad"  fx="0%" fy="5%" r="200%">
     <stop offset="0%" stop-color ="#FFFFFF" />
      <stop offset="4%" stop-color ="#ffb3ff" />
       <stop offset="12.25%" stop-color ="#ff33ff" />
        <stop offset="31.25%" stop-color ="#800080" />
          <stop offset="50%" stop-color ="#b300b3" /> 

   </radialGradient>

To animate the gradient, you can use any attribute included in the formula.
The examples below will use the attributes fx andfy

• Animation of horizontal gradient movement

Animation starts after clicking on a rectangle

svg {
 width:50%;
 height:50%;
 }
 .txt {
 font-family:sans-serif;
 font-size:28px;
 font-weight:bold;
 text-anchor:middle;
 fill:#FFDD00;
  }

<div id="shine-div">
   <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
   <defs>
  <radialGradient id="radGrad"  fx="0%" fy="0%" r="200%">
      <stop offset="0%" stop-color ="#FFFFFF" />
	    <stop offset="4%" stop-color ="#ffb3ff" />
	    <stop offset="12.25%" stop-color ="#ff33ff" />
	    <stop offset="31.25%" stop-color ="#800080" />
	    <stop offset="50%" stop-color ="#b300b3" /> 		 
  </radialGradient>
   </defs> 
    <g id="gr1" > 
      <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/> 
       <text class="txt" x="50%" y="60%"> Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fx"
	  dur="3s"begin="gr1.click"
	  values="0%;100%;0%"
	  
	  repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

• An animation of the vertical gradient movement.

svg {
 width:50%;
 height:50%;
 }
 .txt {
 font-family:sans-serif;
 font-size:28px;
 font-weight:bold;
 text-anchor:middle;
 fill:#FFDD00;
  }

<div id="shine-div">
   <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
   <defs>
  <radialGradient id="radGrad"  fx="48%" fy="0%" r="200%">
        <stop offset="0%" stop-color ="#FFFFFF" />
	    <stop offset="4%" stop-color ="#ffb3ff" />
	    <stop offset="12.25%" stop-color ="#ff33ff" />
	    <stop offset="31.25%" stop-color ="#800080" />
	    <stop offset="50%" stop-color ="#b300b3" /> 		 
  </radialGradient>
   </defs> 
    <g id="gr1" > 
      <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/> 
       <text class="txt" x="50%" y="60%"> Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fy"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;50%;50%;0%"
	  keyTimes="0;0.1;0.5;0.6;0.7;0.9;1"
	  repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

• Moving the gradient diagonally

Two attributes are simultaneously animated: fx andfy

svg {
 width:50%;
 height:50%;
 }
 .txt {
 font-family:sans-serif;
 font-size:28px;
 font-weight:bold;
 text-anchor:middle;
 fill:#FFDD00;
  }

<div id="shine-div">
   <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
   <defs>
  <radialGradient id="radGrad"  fx="0%" fy="0%" r="200%">
        <stop offset="0%" stop-color ="#FFFFFF" />
	    <stop offset="4%" stop-color ="#ffb3ff" />
	    <stop offset="12.25%" stop-color ="#ff33ff" />
	    <stop offset="31.25%" stop-color ="#800080" />
	    <stop offset="50%" stop-color ="#b300b3" /> 		 
  </radialGradient>
   </defs> 
    <g id="gr1" > 
      <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/> 
       <text class="txt" x="50%" y="60%"> Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fy"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;0%"
	  keyTimes="0;0.1;0.5;0.9;1"
	  repeatCount="1"
	  restart="whenNotActive" />
	  
	     <animate xlink:href="#radGrad"
			  attributeName="fx"
			  dur="2s"begin="gr1.click"
			  values="0%;50%;50%;100%;0%"
			  keyTimes="0;0.1;0.5;0.9;1"
			  repeatCount="1"
			  restart="whenNotActive" />
  </svg>
</div>