50 Mins upper-intermediate
15. Transitions & Animations
CSS Motion
Transitions & Animations
The difference between an amateur website and a premium one often comes down to motion. Smooth transitions make your UI feel polished, responsive, and alive.
✨ CSS Transitions
Add transition to the base state of an element. When any property changes (e.g., on hover), it animates smoothly instead of snapping:
<style>
.btn {
background: #00A3FF;
color: white;
padding: 12px 28px;
border: none;
border-radius: 8px;
font-size: 16px;
font-family: sans-serif;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block;
margin: 20px;
}
.btn:hover {
background: #0077CC;
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 163, 255, 0.4);
}
</style>
<div style="background:#f0f0f0; padding:20px; text-align:center;">
<button class="btn">Hover Over Me ✨</button>
</div>
🎭 Keyframe Animations
Keyframes define multi-step animations that run automatically without user interaction:
<style>
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes slideIn {
from { transform: translateX(-50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.dot { width: 20px; height: 20px; background: #ff5f57; border-radius: 50%; animation: pulse 1.5s infinite; display: inline-block; margin: 20px; }
.box { background: #4FC3F7; color:white; padding:12px 20px; border-radius:6px; display:inline-block; margin:8px; animation: slideIn 0.6s ease-out; font-family:sans-serif; }
.wheel { width: 40px; height: 40px; border: 4px solid #eee; border-top-color: #00A3FF; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; margin: 20px; }
</style>
<div style="font-family:sans-serif; padding:10px;">
<p>Pulse dot: <span class="dot"></span></p>
<p>Slide in: <span class="box">I slid in!</span></p>
<p>Loading spinner: <span class="wheel"></span></p>
</div>
🃏 Card Hover Effect
<style>
* { box-sizing: border-box; }
.cards { display: flex; gap: 16px; padding: 24px; background: #1a1a2e; }
.card {
background: #2d2d44;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 20px;
color: white;
font-family: sans-serif;
flex: 1;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
border-color: #00A3FF;
}
.card h4 { color: #00A3FF; margin-bottom: 8px; }
</style>
<div class="cards">
<div class="card"><h4>HTML</h4><p>Structure</p></div>
<div class="card"><h4>CSS</h4><p>Style</p></div>
<div class="card"><h4>JS</h4><p>Logic</p></div>
</div>
Knowledge Check
Ready to test your understanding of 15. Transitions & Animations?