CSS Animation Challenges

Welcome to the CSS Animation Challenge! This repository is a hands-on practice platform for developers looking to test and improve their CSS animation and transition skills.

The Challenge Workflow

The goal is to recreate the animation shown in the video for each challenge.

1. Pick Your Challenge:

   • Navigate into a challenge folder (e.g., challenge 1/).

2. Watch the Goal:

   • Open and watch the challenge 1.mkv video. This is the final animation you must build.

3. Try It Yourself:

   • Create your own index.html and style.css files.
   • Using only the image assets provided in that folder, write your own HTML and CSS to replicate the animation.

4. Check Your Work:

   • Once you're finished (or if you get stuck), open challenge 1.html and challenge 1.css to see the official solution.
   • Compare your code to the solution to see how it was done, learn new techniques, and find areas for improvement.

---

What You'll Practice

These challenges will test your skills with a variety of core CSS concepts:

• Challenge 1: Basic Keyframes

  • Concepts: @keyframes, transform: rotate(), animation shorthand, linear-infinite timing.

• Challenge 2: Compound & Layered Animations

  • Concepts: Synchronizing multiple animations, transform: translateX(), z-index for layering, parent-child animation relationships.

• Challenge 3: Interactive & Background Animations

  • Concepts: :hover transitions, transform: scale() / translateY(), opacity, @keyframes for background-image (slideshows), and linear-gradient animation.

---

Getting Started

No server, compilation, or dependencies are required.

1. Clone the repository:

   git clone https://github.com/ayoubabbadi/CSS-Animation-Challenges.git
   

2. Navigate to a challenge directory:

   cd CSS-Animation-Challenges/"challenge 1"
   

3. Start the challenge!

   • Watch the video.
   • Create your own files and start coding.

---