CSS: How can I make a background that shift from transparent, to a given color at about 50% of its width and then back to transparent to 100% of its width?

Answer 1

If I understand the question correctly, you set the background-image to a linear gradient, and use RGBA() for the color values. You set the opacity values of the three color values to 0 then 1 then back to 0.

If you want the background to actually slide back and for, you use keyframes. You'd use the same color values as before. Then you set the width of the background to be larger than what is displayed on the DOM, so in this case maybe 300%. Then set the keyframes to to slide from left to right, or vice versa, depending on the effect you want.