CSS Transitions & Animations
Click a Box to copy
Basic Transitions
Color
transition: background-color 0.5s ease;
Transform
transition: transform 0.5s ease;
Shadow
transition: box-shadow 0.5s ease;
Multiple
transition: background-color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
Delay
transition: background-color 0.5s ease 0.2s;
Cubic Bezier
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
Basic Animations
Pulse
animation: pulse 2s infinite;
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Fade In
animation: fadeIn 2s;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Rotate
Bounce
Advanced Animations
Shake
Flip X
Flip Y
Heartbeat
Swing
Loading Animations
Loading
Text Animations
Typing effect...
W
a
v
e
Hover Effects
Grow
Shrink
Rotate
Blur
Brightness
Button Animations
3D Transforms
3D Rotate
Front
Back