Set your Publisher ID in src/config/ads.ts to display live ads.
CSS Transitions & Keyframe Animations
Smooth state changes, cubic-bezier timing, and @keyframes animations
CSS transitions enable smooth parameter interpolation between states on hover or focus, while @keyframes animations choreograph multi-stage motion sequences.
Transitions vs @keyframes
Transitions: Smoothly animate from an initial state to a pseudo-class state (:hover, :focus). Syntax: transition: property duration timing-function delay;.
@keyframes: Run independently of user interactions, cycling continuously or running multi-step keyframe stages (0%, 50%, 100%).
Performance Tip: Always animate transform and opacity exclusively! These properties are GPU-composited and run at 60fps without triggering expensive browser layouts or repaints.
/* Smooth, GPU-composited button elevation */
.btn-primary {
background-color: #04AA6D;
color: white;
padding: 10px 20px;
border-radius: 6px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(4, 170, 109, 0.3);
}
/* Continuous loading spinner */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
width: 24px;
height: 24px;
border: 3px solid #e2e8f0;
border-top-color: #04AA6D;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
Which two CSS properties should you prioritize animating for silky 60fps GPU-accelerated motion?