How to achieve a left-to-right color fill animation on an li element using CSS?

Fill Background Color Left to Right with CSS

You seek to make the background of an li element fill from left to right with a different color on hover. To achieve this, you'll utilize a linear gradient and animate the background position.

Code Implementation:

1. Establish a linear gradient spanning 50% red and 50% blue.
2. Specify the gradient starting on the right edge.
3. Define the background to be twice the element's width (e.g., "background-size: 200% 100%;").

<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;</code>

4. On hover, modify the background position to the left edge, and apply a transition (e.g., "transition:all 2s ease;").

<code class="css">background-position: left;</code>

Vendor Prefixes:

Vendor prefixes might be necessary if you want to ensure cross-browser compatibility. Refer to the comments in your question for guidance on specific vendor prefixes.

Additional Options:

• To create a "color transition," extend the gradient to 300% width and adjust the transition start and end points accordingly.
• See the provided JS Fiddle link for a live demonstration.

The above is the detailed content of How to achieve a left-to-right color fill animation on an li element using CSS?. For more information, please follow other related articles on the PHP Chinese website!