---

🎨 Css-Animations 🚀

A collection of modern CSS UI components with smooth animations and effects, designed to enhance user experience. Each component is lightweight, responsive, and easy to integrate into any project.

📌 Available Components

1️⃣ Animate on Scroll ✨

A beautiful scroll animation effect where elements fade and slide in as they come into view.

🔗 Live Demo

⚡ Features

✔ CSS-only animation (No JavaScript required)
✔ Smooth entry effect using @keyframes
✔ Works with multiple elements
✔ Lightweight and easy to integrate

📂 Installation & Usage

git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Animate on Scroll
start index.html  # Windows
open index.html   # macOS

---

2️⃣ 3D Card Hover Effect 🎭

An elegant 3D hover effect for cards using pure CSS. The card zooms forward while adjacent cards react dynamically.

🔗 Live Demo

⚡ Features

✔ Pure CSS (No JavaScript required)
✔ 3D Perspective Effect
✔ Smooth Hover Transitions
✔ Fully Responsive

📂 Installation & Usage

git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Card Hover
start index.html  # Windows
open index.html   # macOS

---

3️⃣ Autoplay Image Carousel 🎠✨

A sleek, autoplaying image carousel with text overlays on each slide. The carousel automatically transitions every 3 seconds, ensuring a smooth and visually appealing experience.

🔗 Live Demo

⚡ Features

✔ Autoplay functionality (every 3 seconds)
✔ Smooth scrolling transition
✔ Text overlays with headings and descriptions
✔ Dark-themed background for a modern look
✔ Responsive & mobile-friendly

📂 Installation & Usage

git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Carousel
start index.html  # Windows  
open index.html   # macOS  

---

4️⃣ Different Aspect Ratio Image Gallery 📸✨

This project showcases an image gallery where images with varying aspect ratios are displayed in a responsive and stylish layout.

🔗 Live Demo

⚡ Features

✔ Responsive Image Layout
✔ Multi-column Design
✔ Text Section with Multiple Columns
✔ CSS Grid & Flexbox for Layout Management
✔ Lightweight & Simple Design

📂 Installation & Usage

git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Different Aspect Ratio
start index.html  # Windows  
open index.html   # macOS  

---

5️⃣ Background Animation 🌌✨

A stunning background animation using HTML5 Canvas and JavaScript, featuring a network of interconnected particles that dynamically move, creating an engaging and futuristic effect.

🔗 Live Demo

⚡ Features

✔ Smooth Animated Particle Network
✔ Lightweight & Optimized Performance
✔ Fully Responsive Canvas Background
✔ Customizable Particle Size & Speed
✔ Easy to Integrate into Any Website

📂 Installation & Usage

git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Background Animations
start index.html  # Windows  
open index.html   # macOS  

🎨 Customization

You can tweak animation settings in script.js:

const settings = {  
    particleCount: 50,  
    lineOpacity: 0.2,  
    speed: 2  
};

Simply update these values to customize the animation!

---

🛠️ Technologies Used

• HTML5 (Structure)
• CSS3 (Flexbox, Transforms, Keyframes, Grid)
• JavaScript (For interactivity in specific components)

🚀 More Components Coming Soon!

This repository will include more CSS components like buttons, loaders, navigation bars, and more. Stay tuned!

⭐ Star this repo if you find it helpful!

📌 Author: Ritik Kumar
💡 Contributions & Suggestions Welcome!

---