Animation Equalizer Using CSS Transition

Описание: #shorts #css #html #tutorial #trending

styles.css
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
font-family: Arial, sans-serif;
color: #fff;
}

.equalizer {
display: flex;
gap: 15px;
}

.bar {
width: 20px;
height: 100px;
background-color: #4caf50;
animation: equalize 1.5s infinite;
}

.bar.ease {
animation-timing-function: ease;
}

.bar.linear {
animation-timing-function: linear;
}

.bar.ease-out {
animation-timing-function: ease-out;
}

.bar.ease-in {
animation-timing-function: ease-in;
}

@keyframes equalize {
0%, 100% {
height: 20px;
}
50% {
height: 120px;
}
}

p {
margin-top: 20px;
}


We start by adding the HTML structure, including the `head` element where we set the page `title` and link to the external CSS file. After that, we create the main content using `div` elements with specific class names for each bar of our equalizer. Each bar will be assigned unique names, which we will use later in the CSS to apply transition properties.

Next, we move to the CSS file. Here, we begin by defining general styles for the `body`, applying CSS rules for properties such as `display`, `flex-direction`, `height`, `font-family`, and more to ensure the layout and look of the page are set. After that, we assign specific styles to the equalizer container using the `.equalizer` class, arranging the bars in a row with proper spacing.

Now, we move on to the `.bar` class, where we apply styles to the individual equalizer bars, such as width, height, background color, and animations. Finally, for each bar class (like `.ease`, `.linear`, `.ease-out`, and `.ease-in`), we assign different timing functions to their animations. This demonstrates how each timing function behaves—whether it’s a smooth start (`ease`), constant speed (`linear`), a fast start that slows down (`ease-out`), or a slow start that speeds up (`ease-in`).

This code creates an equalizer effect using four bars, each animated with different timing functions to illustrate the differences visually. The bars will animate up and down, changing height to simulate the effect of music beats, providing a dynamic visual demonstration of how CSS timing functions work in practice.

Thank You
JavaHouse