How Can I Animate a Radial Gradient Shine Effect in CSS from Left to Right?

Animating Radial Gradients with CSS

Problem:

You want to create a radial-gradient "shine" effect on a div and make the white highlight smoothly move from left to right.

Solution:

1. Double Gradient Size and 50% Color Stops:

   Create a radial gradient that is twice the size of the div. Set the color stops at half their original values (e.g., 4% instead of 8%, etc.). This ensures the visual appearance remains the same.

2. Animate Gradient Position:

   Use a keyframe animation to manipulate the background-position property. Starting with the gradient positioned at top right, animate it to top left. By setting the animation to alternate, it will reverse direction.

Example Code:

#shine-div {
  height: 30vh;
  width: 60vw;
  margin: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top,
    #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%,
    #800080 31.25%, #b300b3 50%) top right/200% 200%;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position: top left;
  }
}

Note: Due to the calculation of farthest-corner, the gradient might not appear exactly the same as the original definition.

The above is the detailed content of How Can I Animate a Radial Gradient Shine Effect in CSS from Left to Right?. For more information, please follow other related articles on the PHP Chinese website!