BB-8 CSS Animation is a creative front-end project that brings the Star Wars droid BB-8 to life using only HTML and CSS. –more– The project features a smooth rolling animation of BB-8, built purely with HTML5 elements and advanced CSS3 properties such as keyframes, transforms, and pseudo-elements. No JavaScript was used in the animation, making it a lightweight and accessible demonstration of what’s possible with CSS alone.

Live Demo: https://mgatus.github.io/bb8/

🛠️ Tech Used

• HTML5 for structure
• CSS3 for styling and animation
• Keyframe animations, transforms, and responsive layout techniques

🎯 Project Highlights

• Pure CSS animation of a rolling BB-8
• Responsive design
• Minimal and semantic markup
• Styled details like antennae, circular patterns, and head movement all done via CSS

💡 How It Works

BB-8 is composed of multiple div elements styled to form the body, head, and details. Animation is handled using @keyframes to rotate the body and bounce the head, creating a smooth, lively rolling effect. The layout adapts to screen size to ensure the animation remains consistent across devices.

---

A fun and geeky tribute to Star Wars — made with code ✨