Day-18: Elastic

Challenge Description

Achieved a visually captivating elastic animation effect with simple CSS transformations and keyframes. The solution turned out to be easier than expected.

Table of Contents

• Introduction
• Purpose
• Features
• Pre-requisites
• File Structure
• Tools
• Preview
• Contributing
• Credits
• Author

Introduction

This project demonstrates an elastic animation effect using CSS. The animation is designed to create a smooth, bouncing effect that is both visually appealing and simple to implement.

Purpose

The purpose of this project is to showcase a unique CSS animation technique that can be used to add dynamic visual effects to web elements. This effect can be useful for enhancing user interfaces and making web pages more engaging.

Features

• Simple and clean CSS code.
• Smooth elastic animation effect.
• Easy to integrate into any web project.
• Responsive design.

Pre-requisites

Before you begin, ensure you have met the following requirements:

• You have a web browser.
• You have basic knowledge of HTML and CSS.

File Structure

The project directory is structured as follows:

Day-18-Elastic/
├── index.html
├── styles.css
├── README.md

Tools

The following tools were used in the development of this project:

• Visual Studio Code
• GitHub
• CodePen

Preview

You can view a live demo of the project here.

ScreenShot

Contributing

Contributions are always welcome! Please follow these steps to contribute:

1. Fork the repository on GitHub.
2. Clone your fork locally:

git clone https://github.com/Yashi-Singh-1/Day-18-Elastic.git

3. Create a new branch:

git checkout -b feature/your-feature-name

4. Make your changes and commit them:

git commit -m "Add your commit message here"

5. Push your changes to your fork:

git push origin feature/your-feature-name

6. Open a pull request in the original repository and describe your changes.

Thank you for your contributions!

Credits

This project was inspired by the 100 Days CSS Challenge.

Author

Yashi Singh