CSS Animations
Bring your designs to life with smooth, performant animations
Keyframe Basics
Keyframes define the stages of your animation. Create complex motion by specifying styles at various points during the animation sequence.
Simple Bounce
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
}
.ball {
animation: bounce 1s ease-in-out infinite;
}Rotation
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.square {
animation: rotate 2s linear infinite;
}Pulse Effect
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.circle {
animation: pulse 2s ease-in-out infinite;
}Color Shift
@keyframes colorShift {
0% { background: #3b82f6; }
25% { background: #8b5cf6; }
50% { background: #ec4899; }
75% { background: #f59e0b; }
100% { background: #3b82f6; }
}
.element {
animation: colorShift 4s ease infinite;
}Animation Properties
Control every aspect of your animations with these powerful properties.
Timing Functions
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier
/* Timing functions */
.linear { animation-timing-function: linear; }
.ease { animation-timing-function: ease; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
/* Custom cubic-bezier */
.bounce {
animation-timing-function:
cubic-bezier(0.68, -0.55, 0.265, 1.55);
}Direction & Fill Mode
normal
reverse
alternate
fill-mode: both
/* Animation direction */
.normal { animation-direction: normal; }
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }
/* Fill modes */
.forwards { animation-fill-mode: forwards; }
.backwards { animation-fill-mode: backwards; }
.both { animation-fill-mode: both; }Play State
Hover to pause
/* Control animation playback */
.animated {
animation: slide 3s infinite;
animation-play-state: running;
}
.animated:hover {
animation-play-state: paused;
}
/* JavaScript control */
element.style.animationPlayState = 'paused';Creative Effects
Combine animations to create stunning visual effects that captivate your users.
Loading Spinner
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}Typing Effect
Hello, World!
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink {
50% { border-color: transparent; }
}
.typing {
width: 0;
overflow: hidden;
white-space: nowrap;
border-right: 3px solid;
animation:
typing 3s steps(13),
blink 1s infinite;
}Floating Elements
🎈
🎈
🎈
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.floating {
animation: float 3s ease-in-out infinite;
}
/* Stagger animations */
.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 1s; }Morphing Shape
@keyframes morph {
0% {
border-radius: 50%;
transform: rotate(0deg);
}
50% {
border-radius: 0%;
transform: rotate(180deg);
}
100% {
border-radius: 50%;
transform: rotate(360deg);
}
}
.shape {
animation: morph 4s ease-in-out infinite;
}Wave Animation
@keyframes wave {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-15px);
}
}
.wave-dot {
animation: wave 1.5s infinite;
}
.wave-dot:nth-child(2) { animation-delay: 0.1s; }
.wave-dot:nth-child(3) { animation-delay: 0.2s; }
.wave-dot:nth-child(4) { animation-delay: 0.3s; }
.wave-dot:nth-child(5) { animation-delay: 0.4s; }Glitch Effect
GLITCH
@keyframes glitch {
0%, 100% {
text-shadow:
2px 2px 0 #ff00ff,
-2px -2px 0 #00ffff;
}
25% {
text-shadow:
-2px 2px 0 #ff00ff,
2px -2px 0 #00ffff;
}
}
.glitch {
animation: glitch 0.5s infinite;
}Advanced Techniques
Push the boundaries with complex animations and performance optimisations.
3D Card Flip
Front Side
Hover to flip
Back Side
Hidden content!
/* 3D card flip */
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
transform-style: preserve-3d;
transition: transform 0.6s;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}Particle System
@keyframes rise {
to {
transform: translateY(-100vh);
opacity: 0;
}
}
.particle {
position: absolute;
animation: rise 10s infinite;
}
/* Random positions and delays */
.particle:nth-child(1) {
left: 10%;
animation-delay: 0s;
}
.particle:nth-child(2) {
left: 30%;
animation-delay: 2s;
}SVG Path Animation
/* SVG path animation */
.svg-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 3s ease-in-out infinite;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}Animation Best Practices
Use Transform & Opacity
These properties are GPU-accelerated and provide the smoothest animations.
will-change Property
Hint to browsers about which properties will animate for better optimisation.
Respect Motion Preferences
Use prefers-reduced-motion media query for accessibility.
Test on Real Devices
Mobile devices have different performance characteristics than desktops.