How can I use CSS to animate SVG elements?

How can I use CSS to animate SVG elements?

You can animate SVG elements using CSS by targeting the SVG properties like transform, opacity, and fill. For example, you can use keyframes to create smooth transitions.

Can you give me an example of animating an SVG circle?

Sure! Here's a simple example:

@keyframes moveCircle {
  0% { transform: translate(0, 0); }
  50% { transform: translate(50px, 50px); }
  100% { transform: translate(0, 0); }
}

.circle {
  animation: moveCircle 2s infinite;
}

And in your SVG:

<svg width="100" height="100">
  <circle class="circle" cx="50" cy="50" r="40" fill="blue" />
</svg>

What other properties can I animate?

You can animate properties like stroke, stroke-width, fill, and even filter. Each property can create different visual effects.

Are there any performance considerations I should keep in mind?

Yes, animating properties like transform and opacity is generally more performant than animating others like width or height, as they can leverage the GPU.