Animated Jumping Totoro Using HTML and CSS

Description

Animated Jumping Totoro

This is a simple HTML and CSS project that creates an animated jumping Totoro character. Totoro is a popular character from the Studio Ghibli film “My Neighbor Totoro.” In this project, Totoro is animated to appear as if it is jumping up and down. The animation is achieved using CSS keyframes and transforms.

How It Works

The project consists of an HTML file and a CSS file:

• HTML (index.html): The HTML file defines the structure of the Totoro character. It creates a container for Totoro and various elements for Totoro’s body parts, including eyes, nose, ears, whiskers, and a shadow.

• CSS (style.css): The CSS file contains styles and animations to create the Totoro character and the jumping animation. The keyframes define the different stages of the jumping animation, which is applied to the Totoro’s body to make it appear as if it’s squishing and stretching while jumping.