Slowed Horse Animation

AI Overview: Slowed Horse Animation

This project is a sophisticated, pure CSS-driven animation of a galloping horse. Its primary purpose is to demonstrate how complex, lifelike motion can be achieved using nested HTML elements and synchronized CSS keyframes. A key feature of the project is the "slow-motion" toggle; by clicking on the animation, the user can switch between a realistic gallop and a highly detailed slow-motion view that reveals the intricate movements of the horse's joints and the trailing dust particles.

The project works by constructing the horse's body as a hierarchy of nested div elements, mimicking a skeletal structure. For example, a leg is not a single object but a series of connected parts like the shoulder, knee, and hoof. This nesting allows animations applied to a "parent" part (like the shoulder) to naturally carry down to the "child" parts (like the hoof), while each child part simultaneously performs its own specific rotation and translation.

The logic is controlled almost entirely through CSS variables defined in the :root. These variables manage the animation timing, colors, and dimensions. When the hidden checkbox is toggled via a user click, these variables are updated instantly, changing the --speed from a fast 0.8 seconds to a slow 8 seconds and adjusting the horse's opacity to create a "ghosting" effect.

Key Code Snippets

1. Centralized Animation Control
The project uses CSS variables to define the core properties of the animation, making it easy to update the entire scene from one place.

:root {
  --speed: 0.8s;
  --horse-width: 3.8rem;
  --color-horse: rgba(50, 50, 50, 1);
}

2. The Slow-Motion Toggle
This "checkbox hack" detects when the user clicks the animation and overrides the default variables to slow down the speed and change the visual style.

input[type=checkbox]:checked~label {
  --speed: 8s;
  --color-horse: rgba(50, 50, 50, 0.3);
}

3. Hierarchical Body Structure
The HTML is structured so that each limb is a chain of nested elements, allowing for realistic joint articulation.

<div class="front-leg right">
    <div class="shoulder">
        <div class="upper">
            <div class="knee">
                <!-- Further nested joints -->
            </div>
        </div>
    </div>
</div>

4. Synchronized Keyframe Animations
Each specific part of the horse has its own unique @keyframes animation that runs over the duration of the --speed variable to ensure the gallop looks natural.

.animate .front-leg .shoulder {
  animation: front-shoulder var(--speed) linear infinite;
}

5. Dynamic Dust Particles
The project includes two groups of dust particles that use mathematical offsets to fly off the ground as the horse runs.

.dust .particle {
  background-color: var(--color-dust);
  width: 0.05rem;
  height: 0.05rem;
  position: absolute;
  top: calc(50vh + (var(--horse-height) / 2) - 0.05rem);
}