Any help here please, will really appreciate. Been on this for more than 15 hours

I have written and animated two images and text tags using Css keyframe animation.

So, I want to be able to control these same animations using Javascript via two buttons I already created. I have researched and researched, can't solve this logic.

The animation I did via css keyframe happened this way:

When you load the page, the first image slide in from left, stayed for few seconds and slide out via left and the second image slide in and remained on the page. The texts tags animated for each of the images.

Now, I want to be able to use the buttons to slide the images in and out after the css animations have completed. Help me, pls if you can. Thanks

ugom123:
Any help here please, will really appreciate. Been on this for more than 15 hours

I have written and animated two images and text tags using Css keyframe animation.

So, I want to be able to control these same animations using Javascript via two buttons I already created. I have researched and researched, can't solve this logic.

The animation I did via css keyframe happened this way:

When you load the page, the first image slide in from left, stayed for few seconds and slide out via left and the second image slide in and remained on the page. The texts tags animated for each of the images.

Now, I want to be able to use the buttons to slide the images in and out after the css animations have completed. Help me, pls if you can. Thanks

You’re talking of event. Attach an event listener to the button.

Create a function to do what you want,
Create an event listener

So your codes go like this

function doTheAmination(){
}


myButton.onclick => should call doTheAnimation

stanliwise:


You’re talking of event. Attach an event listener to the button.

Create a function to do what you want,
Create an event listener

So your codes go like this

function doTheAmination(){
}


myButton.onclick => should call doTheAnimation

Thank you brotherly.so grateful that someone showed interest to help me. Pls, can I add you on WhatsApp?

Check out js sliders here https://www.w3schools.com/howto/howto_js_slideshow.asp

ugom123:


Thank you brotherly.so grateful that someone showed interest to help me. Pls, can I add you on WhatsApp?

0 eight 1 72 eight 3 three zero 7 3

stanliwise:
0 eight 1 72 eight 3 three zero 7 3

Thank you so much bro.

it's some times very hard to control CSS animation using JavaScript I prefer coding the animation itself using JavaScript timing event called setInterval (); with this event you can easily set control and manipulate HTML elements

ahmedsaniadamu:
it's some times very hard to control CSS animation using JavaScript I prefer coding the animation itself using JavaScript timing event called setInterval (); with this event you can easily set control and manipulate HTML elements

You have a point. I have noticed that it is hard to really control CSS animations especially, the keyframe ones. I have given up and will try and animate using javascript and set transition in css.

stanliwise:

You’re talking of event. Attach an event listener to the button.
Create a function to do what you want, Create an event listener
So your codes go like this
function doTheAmination(){ }

myButton.onclick => should call doTheAnimation

Does anyone still use on click... Shouldn't it be
myButton.addeventlistener ('click', doTheAnimation)

Qsand:


Does anyone still use on click... Shouldn't it be

myButton.addeventlistener ('click', doTheAnimation)

Everything is a semantic perhaps I was writing a pseudo code

Is there anyone that can teach angular or vue