https://github.com/talhat298/bus-travel

A simple, pure CSS animation featuring a bus and a car traveling across a detailed background. The animation includes moving vehicles with rotating wheels, all designed using only HTML and CSS, without any JavaScript.
https://github.com/talhat298/bus-travel

html-css media-queries

Last synced: about 1 month ago
JSON representation

A simple, pure CSS animation featuring a bus and a car traveling across a detailed background. The animation includes moving vehicles with rotating wheels, all designed using only HTML and CSS, without any JavaScript.

• Host: GitHub
• URL: https://github.com/talhat298/bus-travel
• Owner: TalhaT298
• Created: 2023-02-09T15:19:38.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-17T18:58:05.000Z (5 months ago)
• Last Synced: 2024-08-17T19:58:57.106Z (5 months ago)
• Topics: html-css, media-queries
• Language: CSS
• Homepage: https://bus-bus.netlify.app/
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Travel Animation with HTML and CSS

This project showcases an animated travel scene created entirely using HTML and CSS. The animation features a bus moving across the screen with rotating wheels, a car following behind, and a detailed background to simulate a travel environment.

## Features

- **Pure CSS Animation:** The animation is crafted purely with CSS, demonstrating the power of keyframes, transforms, and transitions to bring a static design to life without relying on JavaScript.

- **Detailed Vehicle Design:** Both the bus and car are meticulously designed with `div` and `span` elements, mimicking real-life features like windows, doors, and wheels. The design emphasizes a playful yet realistic look, with color gradients, borders, and background images.

- **Responsive Background:** The background image is designed to fit the screen perfectly, providing a seamless experience across different devices.

- **Moving Bus:** The bus moves from left to right across the screen, simulating travel. The wheels rotate as the bus moves, adding to the realism.

- **Rotating Wheels:** The wheels of both the bus and car rotate continuously as they move along the road, thanks to the `rotate-wheel` animation.

## How It Works

The animation is controlled primarily through CSS keyframes:

- The `move-left` keyframe handles the horizontal movement of the bus across the screen.

- The `rotate-wheel` keyframe creates the rotation effect for the wheels, simulating real-world movement.

The layout is structured using nested `divs`, with careful attention to positioning, sizing, and layering to achieve the final design.

## Installation

1. Clone the repository:

    ```bash

    git clone https://github.com/TalhaT298/travel-animation.git

    ```

2. Navigate to the project directory:

    ```bash

    cd travel-animation

    ```

3. Open the `index.html` file in your browser to see the animation in action.

## Usage

Feel free to modify the styles and structure to create your own version of the animation. You can change the colors, vehicle designs, or even the background image to suit your project’s needs.

## Contributing

Contributions are welcome! If you have any improvements or additional features in mind, feel free to submit a pull request. Let's make this animation even more captivating together!

## Live Link