How to Animate a Dotted World Map with CSS

Animating a dotted world map with CSS brings your geographic visualizations to life. Whether you want a subtle fade-in effect, a pulsing animation, or an interactive reveal, CSS animations are lightweight, performant, and easy to implement.

In this guide, we'll explore various CSS animation techniques for dotted maps, from simple transitions to complex sequenced animations.

Why Animate Maps with CSS?

CSS animations offer several advantages:

Performance — Hardware-accelerated, smooth animations
Lightweight — No JavaScript required for basic animations
Easy to Control — Simple keyframe syntax
Responsive — Works across all devices
Accessible — Can respect prefers-reduced-motion

Generate vector dotted maps

Create vector dotted maps with custom options and download them as SVG or PNG files

Basic Fade-In Animation

Simple Fade

.world-map {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Fade with Scale

.world-map {
  opacity: 0;
  transform: scale(0.9);
  animation: fadeInScale 1s ease-out forwards;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Dot-by-Dot Animation

Sequential Dot Appearance

.dot {
  opacity: 0;
  animation: dotAppear 0.5s ease-out forwards;
}

/* Stagger the animation for each dot */
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.05s; }
.dot:nth-child(3) { animation-delay: 0.1s; }
/* Continue for all dots... */

Better approach with JavaScript:

const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
  dot.style.animationDelay = `${index * 0.02}s`;
});

.dot {
  opacity: 0;
  animation: dotAppear 0.3s ease-out forwards;
}

@keyframes dotAppear {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Pulse Animation

Continuous Pulse

.dot {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    r: 2;
  }
  50% {
    opacity: 0.7;
    r: 3;
  }
}

Staggered Pulse Wave

.dot {
  animation: pulseWave 3s ease-in-out infinite;
}

.dot:nth-child(3n) { animation-delay: 0s; }
.dot:nth-child(3n+1) { animation-delay: 0.3s; }
.dot:nth-child(3n+2) { animation-delay: 0.6s; }

@keyframes pulseWave {
  0%, 100% {
    opacity: 0.5;
    r: 2;
  }
  50% {
    opacity: 1;
    r: 3;
  }
}

Region-by-Region Reveal

Country Reveal Animation

.country {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: revealCountry 1s ease-out forwards;
}

@keyframes revealCountry {
  to {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

Sequential Country Animation

const countries = document.querySelectorAll('.country');
countries.forEach((country, index) => {
  country.style.animationDelay = `${index * 0.1}s`;
});

.country {
  opacity: 0;
  transform: translateY(20px);
  animation: slideInFade 0.6s ease-out forwards;
}

@keyframes slideInFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Interactive Hover Animations

Dot Expansion on Hover

.dot {
  transition: all 0.3s ease;
  r: 2;
}

.dot:hover {
  r: 4;
  opacity: 1;
  animation: pulseHover 1s ease-in-out infinite;
}

@keyframes pulseHover {
  0%, 100% {
    r: 4;
  }
  50% {
    r: 5;
  }
}

Country Highlight Animation

.country {
  transition: all 0.3s ease;
  fill: #e5e7eb;
}

.country:hover {
  fill: #3b82f6;
  animation: highlightPulse 1s ease-in-out infinite;
}

@keyframes highlightPulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

Generate vector dotted maps

Create vector dotted maps with custom options and download them as SVG or PNG files

Advanced Animation Techniques

Path Drawing Animation

.country-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawPath 2s ease-out forwards;
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

Rotating Globe Effect

.world-map-container {
  animation: rotateGlobe 20s linear infinite;
  transform-origin: center center;
}

@keyframes rotateGlobe {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Zoom and Pan Animation

.map-viewport {
  animation: zoomPan 10s ease-in-out infinite;
}

@keyframes zoomPan {
  0% {
    transform: scale(1) translate(0, 0);
  }
  25% {
    transform: scale(1.2) translate(50px, 30px);
  }
  50% {
    transform: scale(1.5) translate(-30px, -50px);
  }
  75% {
    transform: scale(1.2) translate(20px, 40px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

Performance Optimization

Use Transform and Opacity

/* Good - uses GPU acceleration */
.dot {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.3s, opacity 0.3s;
}

/* Avoid - triggers layout recalculation */
.dot {
  left: 100px;
  top: 100px;
  transition: left 0.3s, top 0.3s;
}

Will-Change Property

.dot {
  will-change: transform, opacity;
  animation: pulse 2s infinite;
}

/* Remove will-change after animation if not needed */

Respect Reduced Motion

@media (prefers-reduced-motion: reduce) {
  .dot,
  .country {
    animation: none;
    transition: none;
  }
}

Common Animation Patterns

Loading State

.map-loading {
  opacity: 0;
  animation: fadeIn 0.5s ease-out 0.3s forwards;
}

.map-loading .dot {
  animation: dotAppear 0.3s ease-out forwards;
}

Data Update Animation

.country.updated {
  animation: dataUpdate 0.5s ease-out;
}

@keyframes dataUpdate {
  0%, 100% {
    fill: currentColor;
  }
  50% {
    fill: #fbbf24; /* Highlight color */
  }
}

Focus Animation

.country:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  animation: focusPulse 1s ease-in-out infinite;
}

@keyframes focusPulse {
  0%, 100% {
    outline-width: 2px;
  }
  50% {
    outline-width: 4px;
  }
}

Best Practices

Timing

Keep animations short (0.3-1s for most effects)
Use ease-out or ease-in-out for natural motion
Stagger animations for visual interest

Performance

Animate transform and opacity properties
Use will-change sparingly
Test on lower-end devices

Accessibility

Respect prefers-reduced-motion
Provide alternative static versions
Ensure animations don't distract from content

Final Thoughts

Animating dotted world maps with CSS adds life and engagement to your geographic visualizations. From subtle fade-ins to complex sequenced reveals, CSS animations give you the tools to create professional, performant effects.

Start with a clean SVG map from World in Dots, then layer on your CSS animations to create something dynamic and engaging. The combination of vector graphics and CSS animations is powerful — and it's all built into modern web standards.

Ready to animate your maps? Generate your SVG map and start experimenting with CSS animations today.

See all posts