Recreating the Apple Music Hits Playlist Animation in CSS

Apple Music's "Spatial Audio" feature creates a directional sound experience based on device positioning. This article, however, focuses on recreating a CSS animation observed on an Apple Music playlist featuring Spatial Audio tracks. The playlist cover showcases a pink container with boxes animating sequentially: fading in from the center, then scaling outwards and fading out, creating an infinite loop.

This tutorial details how to replicate this effect using CSS.

HTML Structure:

The HTML is remarkably simple, consisting of a container and ten individual box elements:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS Styling:

The CSS code styles both the container and the individual boxes.

Container Styling:

The container is styled with a pink background, specific dimensions (approximately matching the Apple Music visual), rounded corners, and overflow: hidden to prevent box overflow. Grid is used for centering:

.container {
  background-color: #eb5bec;
  border-radius: 16px;
  height: 315px;
  overflow: hidden;
  position: relative; /* For absolute positioning of boxes */
  width: 385px;
  display: grid;
  place-items: center;
}

Box Styling and Animation:

Each box is given a dark background color, initial opacity, and absolute positioning. The key animation, grow, uses @keyframes to define the scaling and opacity changes. A custom property --delay controls the animation delay for each box, creating the staggered effect:

.box {
  background: #471e45;
  height: 100px;
  opacity: 0.5;
  position: absolute;
  width: 100px;
  animation: grow 10s linear infinite; /* 10 seconds for 10 boxes */
  transform-origin: center; /* Ensures scaling from the center */
}

.box:nth-child(n) {
  --delay: calc(1s * var(--n)); /* Stagger animation delay */
}

@keyframes grow {
  from {
    opacity: 0.5;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(3.85);
  }
}

The :nth-child(n) selector and the calc() function dynamically adjust the --delay for each box. The scale factor (3.85) is calculated based on the box and container dimensions to ensure the boxes reach the container edges.

This approach effectively recreates the Apple Music playlist animation using only CSS, demonstrating a creative solution for replicating complex visual effects with simple code.

The above is the detailed content of Recreating the Apple Music Hits Playlist Animation in CSS. For more information, please follow other related articles on the PHP Chinese website!