From 13f18b83d08966eba013fee935184a3baf67daaf Mon Sep 17 00:00:00 2001
From: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:46:18 +0530
Subject: [PATCH] feat(curriculum): add interactive examples to css animations
 (#65370)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>
Co-authored-by: zaira <zairahira@gmail.com>
---
 .../671a999cc77b7f9bceb4caeb.md               | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/curriculum/challenges/english/blocks/review-css-animations/671a999cc77b7f9bceb4caeb.md b/curriculum/challenges/english/blocks/review-css-animations/671a999cc77b7f9bceb4caeb.md
index 12aa668032d..3243eb7f4c9 100644
--- a/curriculum/challenges/english/blocks/review-css-animations/671a999cc77b7f9bceb4caeb.md
+++ b/curriculum/challenges/english/blocks/review-css-animations/671a999cc77b7f9bceb4caeb.md
@@ -5,24 +5,41 @@ challengeType: 31
 dashedName: review-css-animations
 ---
 
-# --description--
+# --interactive--
 
 ## CSS Animation Basics
 
 - **Definition**: CSS animations allow you to create dynamic, visually engaging effects on web pages without the need for JavaScript or complex programming. They provide a way to smoothly transition elements between different styles over a specified duration.
 - **The `@keyframes` Rule**: This rule defines the stages and styles of the animation. It specifies what styles the element should have at various points during the animation.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="box">Slide</div>
+```
+
 ```css
+.box {
+  width: 120px;
+  padding: 10px;
+  background: #0077ff;
+  color: white;
+  animation: slide-in 1s ease-in-out;
+}
+
 @keyframes slide-in {
-  0% {
+  from {
     transform: translateX(-100%);
   }
-  100% {
+  to {
     transform: translateX(0);
   }
 }
 ```
 
+:::
+
 - **`animation` Property**: This is the shorthand property used to apply animations.
 - **`animation-name`**: This specifies the name for the `@keyframes` rule to use.
 - **`animation-duration`**: This sets how long the animation should take to complete.
@@ -37,11 +54,23 @@ dashedName: review-css-animations
 
 - **The `prefers-reduced-motion` Media Query**: One of the primary accessibility concerns with animations is that they can cause discomfort or even physical harm to some users. People with vestibular disorders or motion sensitivity may experience dizziness, nausea, or headaches when exposed to certain types of movement on screen. The `prefers-reduced-motion` media query allows web developers to detect if the user has requested minimal animations or motion effects at the system level.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<button class="animated-element">Hover me</button>
+```
+
 ```css
 .animated-element {
+  padding: 10px 16px;
   transition: transform 0.3s ease-in-out;
 }
 
+.animated-element:hover {
+  transform: translateX(20px);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animated-element {
     transition: none;
@@ -49,6 +78,8 @@ dashedName: review-css-animations
 }
 ```
 
+:::
+
 # --assignment--
 
 Review the CSS Animations topics and concepts.