cubic-bezier | A small cubic bézier timing function

Hi everyone I want to make a wave animation with two SVG, one animation should be made on the top and another on the bottom. I already succeeded the wave on top, but I am stuck to making another to the bottom. Can anyone give me some pieces of advice? Thanks a lot.

Here is my code:

Wave.js:

My current code opens up an input via a click by adding a class. I'm having trouble adding a second click that removes the added class when the user clicks off the input. I added a second click event but it just stops my first click event from working.

Is there a different way to approach this using pure JavaScript?

(Commented out failed attempt.)

Backstory: I wanted to make a slider for my website, so I made another "subpage" just to make things easier to work out (it's just a prototype, so CSS is just the basic styling - if the user clicks the arrow, a slide will slide in that direction, so e.g. if the user pressed the right arrow, the slide will slide off to the right side. From the JS part, it seems like an easy task (I even wrote code for it (not used in the provided code)), but there comes the problem.

Problem description: I need for that to work 2 additional classes (I named them .slideLeft and .slideRight) - one that sets the trasnslateX to -100% and the second one that sets it to 100% (maybe it can be done without classes, but I want to isolate the problem).
Therefore I extracted some of the code from the .slide (base class) to .slideLeft and added it to HTML (just like I did with a .slide) just to make sure it works. But it doesn't.

And here comes the question - why? It works perfectly fine in the .slide class, but when I separate it to another class, it glitches out the whole slider.

I included the working code. The things in CSS that are commented out make the slider break.
Also, the slider may seem like not working properly and being choppy - that's because I reduced translateX value to just -50% (otherwise after uncommenting slides wouldn't be visible).

CODEPEN

I switched my React SSR from pure @emotion to material-ui 5.0, but the styles won't be extracted anymore. The ID extraction in createExtractCriticalToChunks work well, but the cache.inserted object from emotion is now always an empty object. What I'm doing wrong here?

Is it possible to have a CSS slider cycle through two images when animating them with the translateX transform property?

I'm facing a couple of issues:

1. I can't seem to get the second image to show even though it is in the HTML unless I use position: absolute and then the overflow: hidden doesn't work on the parent?

2. How do I reset the first image to go back to the beginning to start it all again?

Note: in the animation shorthand, the animation lasts for 2.5s and there is an initial delay of 3s.

I only want to do with this with the translateX property because I want the 60FPS smoothness (it will be done with translate3d when completed, but to make the code easier to read I've used translateX). I don't wish to animate margin: left or the left property etc.

Any help would be amazing.

Code is below or link to Codepen: https://codepen.io/anna_paul/pen/ZEJrvRp

I am working on a website for my history project and I came across a problem. I tried to animate a details tag but nothing seems to be working. Here is the code I used for the opening animation:

I am following this tutorial of making animation.
It uses only html, css and plain javascript.

This is what I am expecting, the expand and collapase is smooth.

html

I made an animation in CSS for a check (right or wrong). The animation is actually the same, only the color is different. My problem now is that the name of the "Keyframes Fill" class is the same ("100%"). So both have the same color in the Fill animation. Is it possible to fix this problem somehow ?

Thanks.

This is is what I have coded so far Codepen.

Can ignore the background images and other elements. Just need to get the animation for the heading (i.e. in yellow) and the list below right. Any ideas on how to improve this?