Curly Brackets Animation Using HTML & CSS

So this is gonna be a short article where we learn to create a Curly Brackets Animation using HTML & CSS. So let's start writing the code!

We're gonna start by writing basic HTML & then style it using CSS.

HTML Code :

First, we're gonna create a Boilerplate for the HTML code, give it a name & link it with the CSS file.

Inside of the body tag, we're gonna create a div that will have two span tags & inside those span tags, add curly brackets

Output :

Now let's add some styling to make the brackets look cooler!

CSS Code :

The code starts with a body element that has a width & height of 100%. The margin, padding & align-items properties are set to 0.

The next line is the display property for the body element which is set to flex. This means that it will take up as much space on the page as possible while still fitting within its container (the browser window). The justify-content property sets the center alignment of the element. The align-items property centers all of its children in relation to each other.

Finally, there's a background color of #1a1a1a which creates an opaque white background with no transparency or gradients applied

Next comes some CSS code that defines how our loader looks like: Its bold font weight is 30vh and it has an opacity value of 0.8 so it fades into view over time but doesn't disappear completely when not being used by any elements on the screen.

There's also an animation defined here which makes our loader fade in from invisibility at 0 seconds then animate back out again after 4 seconds have passed since we first saw it appear on the screen.

The next line will animate the span:nth-child(odd) element with a 0.4s delay and the span:nth-child(even) element with a 0.8s delay, but it does not animate both elements at once because of how they are written in CSS syntax.

The next line sets up an animation called pulse that will animate from its current state (scale(0)) to scale(1) over a period of 0.4 seconds and then back again over another 0).

Final Output :

Follow for more content ??