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; }
}
animation: 1s ease 0s 1 normal none running slideIn;
Rotate
animation: 3s linear 0s infinite normal none running rotate;
Bounce
animation: 2s ease 0s infinite normal none running bounce;
Advanced Animations
Shake
animation: 1s ease 0s 1 normal none running shake;
Flip X
animation: 3s linear 0s infinite normal none running flipX;
Flip Y
animation: 3s linear 0s infinite normal none running flipY;
Heartbeat
animation: 1.5s ease 0s infinite normal none running heartbeat;
Swing
animation: 2s ease 0s infinite normal none running swing;
Loading Animations
Loading
Text Animations
Typing effect...
W
a
v
e
Hover Effects
Grow
transition: transform 0.3s ease;
Shrink
transition: transform 0.3s ease;
Rotate
transition: transform 0.3s ease;
Blur
transition: filter 0.3s ease;
Brightness
transition: filter 0.3s ease;
Button Animations
3D Transforms
3D Rotate
transform: none;
Front
Back