CSS-Animation-Experiments

This repository contains a collection of CSS animation projects showcasing various loading indicators, interactive components, and modern UI designs. Each project is built using pure CSS and HTML, demonstrating the power of CSS animations and transitions.

Projects

1. Loading Circles

• Description: Three bouncing circles with varying shades of green animate vertically in an alternating pattern against a black background.
• Features:
  • Smooth vertical bounce animation.
  • Slight delays between circles for a staggered effect.
  • Simple yet effective loading indicator.

2. Loading Squares

• Description: Four squares move in a clockwise pattern, creating a continuous loading animation.
• Features:
  • Gradient colors (blue to dark blue) that change during the animation.
  • Staggered timing for a seamless flow effect.

3. Login Page

• Description: A modern dark-themed login interface with a large user icon and expanding input fields.
• Features:
  • Input fields that grow when focused.
  • Teal/cyan accents for buttons and icons.
  • Clean and minimalistic design.

4. Slider Switch

• Description: An interactive toggle switch that changes from red to green when clicked.
• Features:
  • Sliding white circle with animated face elements (eyes and mouth).
  • Glowing shadow effect that changes color with the switch state.

5. Spinner

• Description: A simple and elegant loading spinner with a green circular border and a rotating dot.
• Features:
  • Smooth continuous rotation animation.
  • Minimal design for versatile use.

How to Use

1. Clone the repository:

   git clone https://github.com/M7mdAhmd/css-animation-projects.git