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
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;
}