Animated Matryoshka Dolls in CSS

Russian doll animation effect created by pure CSS! This article will take you to realize an interesting CSS animation step by step, simulate the effect of opening Russian dolls layer by layer, and use CodePen bears to replace the traditional doll image. No JavaScript is required, all interactive functions can be accomplished using CSS alone.

This article will explain in detail how to use CSS to achieve this cool animation effect, including HTML structure construction, core CSS animation mechanism and ultimate style beautification.

First of all, we do not pursue beauty, we first build an HTML structure and realize basic interaction. For easy reset, we wrap the entire animation scene in an HTML form, using<input type="reset"> Implement JavaScript-free reset function. We will use checkbox tricks and associated form tags to create a hierarchy of dolls. Here is an example using the Pug template language, and of course you can also write HTML manually:

Reset

Next, we need to define the style and interaction logic of the doll (or bear). The goal is:

1. Only one check box is displayed at a time.
2. Click the check box to display the label of the next check box.
3. Only the form can be reset when the innermost check box is reached.

This requires the use of CSS adjacent sibling selector ( ).

 input:checked label input label {
  display: block;
}

To display the first tag, we can directly add style="display: block;" in HTML.

However, the last tag has no associated checkbox, so additional rules are required:

 input:checked label input label,
input:checked label label {
  display: block;
}

This implements the basic interaction, followed by the more complex animation parts.

Basic style

First, we create some simple boxes to represent dolls and do basic styles:

 .doll {
  /* ...Style... */
}

Clicking on a doll will immediately display the next one. After reaching the last doll, you can reset the form and start over.

Animation mechanism

We will animation based on the center point. Animation steps:

1. The current doll slides to the left.
2. Open the doll and display the next one.
3. Move the next doll to the starting position of the current doll.
4. The current doll fades out.
5. Set the next doll as the current doll.

We use CSS variables to control animation speed and behavior. First, let the current doll slide to the left:

 :root {
  --speed: 0.25;
  --base-slide: 100;
  --slide-distance: 60;
}

input:checked label {
  animation: slideLeft calc(var(--speed) * 1s) forwards;
  pointer-events: none; /* Prevent repeated clicks*/
}

@keyframes slideLeft {
  to {
    transform: translate(calc((var(--base-slide) * -1px) var(--slide-distance) * -1%), 0);
  }
}

To avoid repeated clicks, we added pointer-events: none; .

Next, we need to turn on the doll to show the next one. This requires some extra elements to simulate the opening effect and delay displaying the next tab. We will use the span element to create "fake" dolls and replace them with real dolls after the animation is over.

<label for="doll--1">
  <span class="doll__half doll__half--top"></span>
  <span class="doll__half doll__half--bottom"></span>
</label>

Then there is the animation of the doll, including the cover opening, the internal doll movement, etc. Here, multiple @keyframes animations and CSS variables are used to control the animation details, and animation-delay and animation-fill-mode are used to accurately control the animation time and state. Finally, by adjusting the size and style of the doll, and adding some detailed animations, such as fade-out effects, you can complete the animation of the entire Russian doll. The complete code can be found on CodePen.

Through the above steps, we have used CSS to achieve this interesting Russian doll animation effect. Hope this article helps you understand and master the skills.

The above is the detailed content of Animated Matryoshka Dolls in CSS. For more information, please follow other related articles on the PHP Chinese website!