https://github.com/yashi-singh-1/day-16-css-shapes-animation

Explore CSS Shapes Animation challenge featuring dynamic animations for circles, squares, and triangles. Enhance your CSS skills with keyframes.
https://github.com/yashi-singh-1/day-16-css-shapes-animation

css css-animations css-keyframes css3 cssanimations csskeyframes front-end front-end-challenge front-end-development front-enddevelopment frontend frontend-challenge frontend-development frontendchallenge frontenddevelopment html html5

Last synced: 2 months ago
JSON representation

Explore CSS Shapes Animation challenge featuring dynamic animations for circles, squares, and triangles. Enhance your CSS skills with keyframes.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-16-css-shapes-animation
• Owner: Yashi-Singh-1
• Created: 2024-06-26T13:16:17.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-06-26T13:21:38.000Z (10 months ago)
• Last Synced: 2024-11-10T11:15:19.697Z (6 months ago)
• Topics: css, css-animations, css-keyframes, css3, cssanimations, csskeyframes, front-end, front-end-challenge, front-end-development, front-enddevelopment, frontend, frontend-challenge, frontend-development, frontendchallenge, frontenddevelopment, html, html5
• Language: CSS
• Homepage:
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
CSS Shapes Animation Challenge


    
Challenge Description

    
This challenge focuses on creating complex animated shapes using CSS animations. It involves combining different shapes such as circles, squares, and triangles, each with its own unique animation, to create visually appealing effects.


    
Table of Contents

    


        
Challenge Description

        
Purpose

        
Features

        
Prerequisites

        
Challenge Structure

        
Installation

        
Preview

        
Contributing

        
Author

    


    
Purpose

    
The purpose of this challenge is to enhance skills in CSS animations and transformations by creating complex shapes and applying dynamic animations to them.


    
Features

    


        
Animations for circle, square, and triangle shapes.

        
Keyframes for bounce, rotate, and pulse effects.

        
Responsive layout using flexbox.

        
Color variations for visual impact.

    


    
Prerequisites

    
To participate in this challenge, basic knowledge of HTML and CSS is required. Familiarity with CSS animations and keyframes will be helpful.


    
Challenge Structure

    
Participants are required to:

    


        
Implement HTML structure for nested shapes.

        
Apply CSS styles for shapes and animations.

        
Fine-tune animations using keyframes.

        
Test responsiveness and adjust layout if necessary.

    


    
Installation

    
To run this project locally:

    


        
Clone the repository:

    

    git clone https://github.com/Yashi-Singh-1/Day-16-CSS-Shapes-Animation.git



    


        
Open index.html in a web browser.

    


    
Preview

    
View the live demo: CSS Shapes Animation Demo

    
Screenshot 

    

![Preview](Preview.png)


    
Contributing

    
Thank you for considering contributing to the CSS Shapes Animation challenge! Contributions are highly appreciated and can range from bug fixes to new features or improvements in animations and responsiveness. To contribute, follow these steps:

    


        


Fork the repository on GitHub.

        


Clone your forked repository locally:

    

    git clone https://github.com/your-username/Day-16-CSS-Shapes-Animation.git



    


        


Create a new branch for your feature or bug fix:

    

    git checkout -b feature-new-animation



    


        


Make changes to the codebase. Ensure that your changes adhere to the existing coding style and practices.

        


Test your changes to ensure they work as expected.

        


Commit your changes:

    

    git commit -am 'Add new animation effect'



    


        


Push your changes to your GitHub repository:

    

    git push origin feature-new-animation



    
Author

    


        
Yashi Singh