CSS animations within SVG | viewBox

A very neat little trick. Embedding @keyframes within your SVG <style> element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even be used in favicons on Firefox 🤩 Example with corresponding <img>:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      animation: bounce 2s infinite ease-in-out alternate;
      transform-origin: 50px 50px;
    }
    @keyframes bounce {
      to {
        transform: scale(0);
      }
    }
  </style>
  <circle cx="50" cy="50" r="25" />
</svg>

<img src="https://viewbox.club/tips/assets/img/CSS_Keyframes.svg" alt="">

Explore Other Notes

Older ➡

Clever quote design and arrow use

The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my …

  • <p>A very neat little trick. Embedding @keyframes within your SVG &lt;style&gt; element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even …</p>
  • Murray Adcock.
Journal permalink