CSS Animation Playground with HTML, CSS & JavaScript
40 DAYS 40 PROJECT CHALLENGE
Day #27
Project Overview
The CSS Animation Playground is an interactive web project built using HTML, CSS, and JavaScript. It gives users a simple space to experiment with different CSS animation effects and see the changes in real time. Instead of only reading about animations, users can click different controls and immediately see how the box moves or transforms.
First, the playground provides animation buttons such as Bounce, Rotate, Scale, and Slide. Next, CSS @keyframes defines how each animation behaves, while JavaScript switches between the animation styles when a button is clicked. Finally, a Reset option removes the animation and returns the box to its normal state.
Key Features
- Interactive Animation Controls: Users can choose different animation effects using simple buttons. Each button applies a specific animation to the box.
- Multiple Animation Effects: The project includes Bounce, Rotate, Scale, and Slide animations. This gives users several ways to explore CSS animation concepts.
- Real-Time Animation Preview: Each animation appears immediately after the user selects an option. Therefore, users can easily see how different CSS properties affect an element.
- Bounce Animation: The Bounce option moves the box vertically between two positions. It uses CSS
translateY()with an alternating animation effect. - Rotate Animation: The Rotate option continuously turns the box around its center. The animation uses
rotate()to create a smooth circular movement. - Scale Animation: The Scale option changes the size of the box between its normal size and a larger size. CSS
scale()controls this transformation. - Slide Animation: The Slide option moves the box horizontally from one side to another. It uses
translateX()to create the movement. - Reset Control: The Reset button removes the active animation from the box. As a result, the element returns to its original appearance.
- Clean and Modern UI: The project uses a simple centered layout with a white container, blue controls, and a clear animation area. This keeps the interface easy to understand.
- Responsive Layout: The controls use Flexbox with wrapping, so the buttons can adjust to different screen sizes. This helps maintain a usable layout on smaller devices.
What You'll Learn
- How to structure an interactive animation playground with HTML
- How to use CSS
@keyframesfor custom animations - How CSS transforms create movement and visual effects
- How to use
translateY()for vertical movement - How to use
translateX()for horizontal movement - How to use
rotate()andscale()transformations - How JavaScript can switch CSS classes dynamically
- How to create interactive controls with JavaScript
HTML Code
The HTML creates the basic structure of the animation playground. First, it adds a main container with the project heading and a playground area containing the animated box. Next, the controls section contains five buttons: Bounce, Rotate, Scale, Slide, and Reset. Each button calls the animateBox() JavaScript function with a different animation type.
Finally, the HTML loads the JavaScript file using a <script> element. This connects the buttons with the animation logic and allows users to control the box interactively.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Animation Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>CSS Animation Playground</h1>
<div class="playground">
<div id="box"></div>
</div>
<div class="controls">
<button onclick="animateBox('bounce')">Bounce</button>
<button onclick="animateBox('rotate')">Rotate</button>
<button onclick="animateBox('scale')">Scale</button>
<button onclick="animateBox('slide')">Slide</button>
<button onclick="animateBox('reset')">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Code
The CSS creates the overall appearance of the playground. The body uses Flexbox to center the main container on the page, while the container uses a white background, rounded corners, padding, and a shadow. Next, the .playground area centers the blue box vertically and horizontally. The controls use Flexbox with wrapping and spacing so the buttons remain organized.
The main animation effects use CSS @keyframes. The bounce animation changes the vertical position, rotate turns the box 360 degrees, scale increases its size, and slide moves it horizontally. Each animation also uses timing and repetition settings to create smooth movement.
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}
body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.container{
background:white;
padding:40px;
border-radius:12px;
width:500px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
h1{
margin-bottom:25px;
}
.playground{
height:200px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:30px;
}
#box{
width:80px;
height:80px;
background:#2563eb;
border-radius:8px;
}
/* CONTROLS */
.controls{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}
button{
padding:10px 15px;
border:none;
background:#2563eb;
color:white;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}
button:hover{
background:#1d4ed8;
}
/* ANIMATIONS */
.bounce{
animation:bounce 0.8s infinite alternate;
}
@keyframes bounce{
from{transform:translateY(0)}
to{transform:translateY(-80px)}
}
.rotate{
animation:rotate 1s linear infinite;
}
@keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
.scale{
animation:scale 1s infinite alternate;
}
@keyframes scale{
from{transform:scale(1)}
to{transform:scale(1.5)}
}
.slide{
animation:slide 1s infinite alternate;
}
@keyframes slide{
from{transform:translateX(-100px)}
to{transform:translateX(100px)}
}Javascript Code
JavaScript connects the animation buttons with the CSS classes. First, it selects the animation box using getElementById(). Next, the animateBox() function removes any existing animation class from the box. If the selected option is not reset, JavaScript adds the chosen animation class using classList.add().
Therefore, the same function can control all four animations without creating separate functions for each button. When the Reset button is clicked, no animation class is added, so the box returns to its normal state.
const box = document.getElementById("box")
function animateBox(type){
box.className = ""
if(type !== "reset"){
box.classList.add(type)
}
}Related Projects
Day 24 : Weather Data Visualizer
Shows real-time weather data based on user location or input.
Concepts: API integration, async data handling, dynamic UI rendering.
Day 25 : Expense Analytics Dashboard
Tracks and visualizes expenses with charts and category breakdowns.
Concepts: Data visualization, state management, dynamic rendering.
Day 29 : Web Accessibility Analyzer
Analyzes website accessibility and highlights improvement areas.
Concepts: DOM analysis, accessibility checks, UI feedback.