How can I use CSS for animating SVGs?

How can I use CSS for animating SVGs?

You can animate SVGs using CSS by targeting SVG elements with CSS properties like transform, opacity, and transition. For example, you can create a simple hover effect by changing the transform property.

Can you give me an example of a CSS animation for an SVG?

Sure! Here's a simple example:

@keyframes example {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.svg-icon:hover {
  animation: example 0.5s forwards;
}

This will scale the SVG icon when hovered.

What about using keyframes for more complex animations?

You can definitely use keyframes for more complex animations! For instance, you can animate multiple properties like fill, stroke, and transform together. Just define your keyframes accordingly.

Are there any limitations to using CSS for SVG animations?

Yes, while CSS animations are great for many effects, they may not support all SVG features, like morphing paths. For those, you might need to use JavaScript or libraries like GSAP.