Create a Pure CSS Sound Bars Animation Using HTML and CSS

Table of Contents

1. Project Introduction
2. HTML Code
3. CSS Code
4. Conclusion
5. Preview

This will be our fun project, Sound bars are one of the classic components used to create an attractive website. They are very simple to make and can be used as animations while recording sound.

In this tutorial, we will be creating a sound bars animation using only HTML and CSS. This tutorial is aimed at beginners with some knowledge of HTML and CSS and is a great introduction to creating animations without the need for external libraries or frameworks.

Let's start making these amazing sound bars using HTML and pure CSS step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file and define the basic structure. We will add a container div and several child divs to represent the sound bars.

In this example, we have created a container div with the ID "bars" and ten child divs with the class "bar". We will use these divs to create the sound bars.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our soundbars using HTML, and now we can move on to styling it using CSS.

Step 2 (CSS Code):

Once we have defined the HTML structure, we can move on to styling the sound bars using CSS. We will define the initial styles for the container div and child divs, and add styles to adjust the width, height, margin, padding, background color, and position of the divs.

Here's a detailed explanation:

1. body Styling:

body {
  background-color: #d6cbcb;
}

• background-color sets the page’s background to a light grayish-pink color.

2. h1 Styling:

h1 {
  color: #555;
  font: bold 12px 'helvetica neue', helvetica, arial, sans-serif;
  left: 0;
  margin: 20px 0 0 0;
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

• color: Sets the text color to dark gray.
• font: Defines the font style, making it bold and using a fallback list (e.g., Helvetica Neue, Arial, sans-serif).
• position: absolute: Positions the heading relative to the closest positioned ancestor (or the body).
• top: 50%;: Moves the element 50% down the viewport.
• left: 0; and width: 100%;: Makes the <h1> span the full width of the page.
• text-align: center;: Centers the text horizontally.

3. #bars Styling:

#bars {
  height: 30px;
  left: 50%;
  margin: -30px 0 0 -20px;
  position: absolute;
  top: 50%;
  width: 40px;
}

• #bars is the container holding the animated bars.
• left: 50%; and top: 50%;: Centers the element both horizontally and vertically.
• margin: -30px 0 0 -20px;: Adjusts the position slightly to keep the bars perfectly centered.
• width and height: Set the size of the bars container to 40px by 30px.

4. .bar Styling:

.bar {
  background: #666;
  bottom: 1px;
  height: 3px;
  position: absolute;
  width: 3px;
  animation: sound 0ms -800ms linear infinite alternate;
}

• .bar defines the appearance of each bar (a thin vertical line):
  • background: Dark gray color for the bars.
  • height and width: Each bar is 3px wide and starts with a height of 3px.
  • position: absolute: Ensures each bar is positioned inside the #bars container.
  • animation: Triggers the sound keyframes animation in an infinite loop.
    • 0ms -800ms: Starts the animation immediately with a staggered delay to avoid synchronized movement.
    • linear infinite alternate: Smooth linear animation that alternates between keyframe states.

5. @keyframes Animation:

@keyframes sound {
  0% {
    opacity: 0.35;
    height: 3px;
  }
  100% {
    opacity: 1;
    height: 28px;
  }
}

• The sound animation makes each bar grow and shrink:
  • At 0%: Bars have low opacity and height of 3px.
  • At 100%: Bars are fully opaque and grow to 28px.
  • This creates a visual effect of fluctuating sound waves.

6. Custom Duration for Each Bar:

.bar:nth-child(1) { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2) { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3) { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4) { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5) { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6) { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7) { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8) { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9) { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }

• nth-child() applies unique styling to each bar based on its position.
• left: Sets the horizontal position for each bar, spacing them out evenly.
• animation-duration: Varies the animation speed for each bar to create a non-uniform, lively effect.

This will give our bars an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Conclusion:

In this tutorial, we have learned how to create a sound bars animation using only HTML and CSS. We have defined the basic HTML structure, styled the sound bars using CSS, and created the animation using CSS keyframes. This is a great introduction to creating animations without the need for external libraries or frameworks.