Pendulum Animation in CSS 🔥 | Realistic Swing Using Keyframes | Project 5

In this animation project, we created a realistic pendulum swing animation using pure CSS.
Students learned how to simulate natural back-and-forth motion using @keyframes, transform-origin, and timing functions — without using JavaScript.

This project helps students understand how real-world motion concepts (like oscillation) can be recreated using CSS animations for modern UI effects.

🔥 What We Built in This Project

✅ Smooth pendulum swing animation
✅ Realistic left-to-right motion
✅ Natural timing & easing
✅ Clean, physics-inspired effect
✅ Pure CSS solution

🧠 Concepts Used in This Project

@keyframes for oscillating motion

transform: rotate()

transform-origin (top center pivot point)

animation-duration & iteration-count

animation-direction: alternate

Timing functions for natural swing feel

🎯 After Watching This Video, Students Will Learn:

✔ How to create oscillating animations in CSS
✔ Why transform-origin is critical for pendulum effects
✔ How rotation animations work
✔ How timing functions affect realism
✔ How to simulate real-world motion using CSS

This project is excellent for animation logic building, UI motion understanding, and portfolio practice.