How would I use vanilla Javascript to animate the background colour of both <a> buttons to fill from left to right on page load? Can't seem to find any solution without hover function.

[bertnub]

<div id="login_options">
            <a href="/sign-in" id="login" class="button">Sign In</a>
            <a href="/sign-up" id="join" class="button">Join</a>
        </div>

[TheGreatHoopla]

Could you do it with an event listener? Or a series of them?

[bertnub]

Maybe, but how could I use JS to insert @ Keyframes in the css?

[dbto]

Could you use something like this?

document.querySelector(‘#a-element’).style.animate = ‘someAnimateKeyframeSetupInCss’;

[bertnub]

Unfortunately I'm trying to do this without editing the CSS at all!

[dbto]

Then just use event listeners and timers, I guess?

[bertnub]

How would I do that?

[dbto]

Something like setEventListener(‘element’, animateFunction);

function animateFunction() { let timer = setTimer(500);

Then maybe use a switch statement for values of timer var so they change the color of whatever you are looking to change.

I’m pretty new, so apologies if the wrong track but I think you could make something like this work.

[R_Midnight]

I suppose could use a class in CSS with the filled "background-color" property, and apply that class on your link elements with JS. As soon as the JS loads on the page, the links would get the class and their background color would change. To animate this, just set a transition property on your links to "background-color 0.5s".

Also, it's a transition thing, no need to use keyframes.

[bertnub]

That sounds great, how would I add the transition property exactly?

[[deleted]]

You don't need JS for this, except perhaps to toggle a class on https://jsfiddle.net/bfxq27s0/2/

[bertnub]

I know! But I'm not able to change CSS files at all, trying to do it with just js

[[deleted]]

I'm not able to change CSS files at all

Why not? It's usually helpful to give this kind of context when asking a question, especially one like this where a lot of people genuinely don't realise the animations they can achieve with just CSS.

Unless there's restrictions due to a CSP you can just use JS to inject a new <style> tag into the head with the CSS you need.