Animating SVG with CSS

SVG Animation

Animate SVG elements with CSS keyframes. Set transform-origin for correct rotation center points.

Example

<style>
.spin { animation: rotate 2s linear infinite; transform-origin: 50px 50px; }
@keyframes rotate { to { transform: rotate(360deg); } }
.pulse { animation: beat 1s ease-in-out infinite; }
@keyframes beat { 0%,100% { r: 30; } 50% { r: 38; } }
</style>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect class="spin" x="20" y="20" width="60" height="60" rx="5"
        fill="none" stroke="steelblue" stroke-width="4" stroke-dasharray="20 10"/>
</svg>

HTML

Full Editor

Pro Tip

transform-origin must match the visual center of the shape for smooth rotation.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned