Apple Watch Music Visualizer Animation

One of the most interesting features of the Apple Watch is its Music app, which allows users to control their music from the watch and even display a visualizer that moves with the tempo of the song. Apple Watch Music Visualizer is the very interesting thing for me. Using pure HTML and CSS, we can create an interface that looks similar to Apple's. It's a simple and beautiful effect that gives the user something to focus on while listening to their music.

Here I am going to share how to create Music Bar with help of HTML5, CSS3 .First of all, make a basic structure for the bars. Here is the HTML code for the Bars.

<div class="bar_wrap">
  <span> </span>
  <span> </span>
  <span> </span>
</div>

.bar_wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 13px;
  height: 13px;

.bar_wrap span {
  width: 3px;
  height: 100%;
  background-color: orange;
  border-radius: 3px;
  animation: bounce 2.2s ease infinite alternate;
  content: '';
}
@keyframes bounce {
  10% {
    transform: scaleY(0.3); /* start by scaling to 30% */
  }

  30% {
    transform: scaleY(1); /* scale up to 100% */
  }

  60% {
    transform: scaleY(0.5); /* scale down to 50% */
  }

  80% {
    transform: scaleY(0.75); /* scale up to 75% */
  }

  100% {
    transform: scaleY(0.6); /* scale down to 60% */
  }
}

.bar_wrap span {
  &:nth-of-type(2) {
    animation-delay: -2.2s; /* Start at the end of animation */
  }

  &:nth-of-type(3) {
    animation-delay: -3.7s; /* Start mid-way of return of animation */
  }
}

Wrapping Up: