How to make the element fill the color from left to right animation?

Question

0.00/5 (No votes)

See more:

I have this code in HTML:

<button class="coloring">button</button>

and this in jQuery:

$(".coloring").mouseenter(function() {
  $(this).css({background: "linear-gradient(109.6deg, rgb(135, 168, 254) 11.2%, rgb(254, 165, 197) 100.2%)"});
}).mouseleave(function(){
  $(this).css({background: ""});
});

and here is a fiddle:
Edit fiddle - JSFiddle - Code Playground[^]
Now what I need to do is to add animation which is fill the button with color from left to right animation.
Here is an example from a website on the navbar:
GAP Polymers | Polymer Distributor | Plastic Resin Supplier[^]
But of course I needed with the colors that I add in the code.

What I have tried:

How can I have this animation?

Posted 30-May-23 2:18am

FRS4002

Updated 30-May-23 3:04am

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2023-05-30T03:04:00

For Chromium-based browsers, you can use the new @property CSS rule to animate the gradient without needing to use Javascript:

CSS

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

button {
    font-size: 3rem;
}

.coloring {
    transition: --a 1.5s, --b 1.5s;
    background: linear-gradient(109.6deg, rgb(135, 168, 254) var(--a), rgb(254, 165, 197) var(--b), #eee var(--b), #eee 101%);
}
.coloring:hover {
    --a: 11.2%;
    --b: 100.2%;
}

Demo[^]
@property - CSS: Cascading Style Sheets | MDN[^]

This is not supported in Firefox; the background will not animate, but simply "snap" between the two states.

How to make the element fill the color from left to right animation?

1 solution

Solution 1

Add your solution here

Preview 0

How to make the element fill the color from left to right animation?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us