01. CSS Keyframes in SVG

Did you know that you can animate SVG in a background image or image tag?

Save your CSS animations within your SVG, reference it like a normal image and it’ll animate! Just like a GIF.

Cool huh! Unfortunately, no support on IE as it doesn’t support CSS animations on SVG.

<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>

Animation within an img tag

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

Animation in a background-image


.box {
  width: 30vmin;
  height: 30vmin;
  max-width: 400px;
  max-height: 400px;
  border: 1px solid black;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  background: url(https://viewbox.club/tips/assets/img/CSS_Keyframes.svg);
}

Animation in the favicon (Firefox only)


<link rel="icon" type="image/svg+xml" href="https://viewbox.club/tips/assets/img/CSS_Keyframes.svg">