https://github.com/yashi-singh-1/day-18-elastic

Achieved a visually captivating elastic animation effect with simple CSS transformations and key-frames. The solution turned out to be easier than expected.
https://github.com/yashi-singh-1/day-18-elastic

animation css css-animation css3 cssanimation elastic-effect elasticeffect front-end front-end-challenge frontend frontend-challenge frontendchallenge html html5 web-animation web-design webanimation webdesign

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-18-elastic
• Owner: Yashi-Singh-1
• Created: 2024-06-27T18:40:26.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-27T19:01:13.000Z (7 months ago)
• Last Synced: 2024-11-10T11:15:20.603Z (about 2 months ago)
• Topics: animation, css, css-animation, css3, cssanimation, elastic-effect, elasticeffect, front-end, front-end-challenge, frontend, frontend-challenge, frontendchallenge, html, html5, web-animation, web-design, webanimation, webdesign
• Language: CSS
• Homepage:
• Size: 15.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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


![Preview](Preview.png)

Contributing

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



    
Fork the repository on GitHub.

    
Clone your fork locally:

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

    
Create a new branch:

    
git checkout -b feature/your-feature-name

    
Make your changes and commit them:

    
git commit -m "Add your commit message here"

    
Push your changes to your fork:

    
git push origin feature/your-feature-name

    
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