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.
The purpose of this challenge is to enhance skills in CSS animations and transformations by creating complex shapes and applying dynamic animations to them.
- Animations for circle, square, and triangle shapes.
- Keyframes for bounce, rotate, and pulse effects.
- Responsive layout using flexbox.
- Color variations for visual impact.
To participate in this challenge, basic knowledge of HTML and CSS is required. Familiarity with CSS animations and keyframes will be helpful.
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.
To run this project locally:
- Clone the repository:
git clone https://github.com/Yashi-Singh-1/Day-16-CSS-Shapes-Animation.git- Open
index.htmlin a web browser.
View the live demo: CSS Shapes Animation Demo
Screenshot
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- Yashi Singh