Animating SVG images with CSS

I was looking for ways of animating an image and discovered that it can be done via embedded CSS within a SVG file.

The result looks like this:

The image consists of three groups, each containing multiple polygons. I wanted to treat each group as a frame that replaces the other. I gave every group a class name

    <g class="group1" ...>
    <g class="group2" ...>

The rest was done with an inline CSS tag also in the SVG file itself in which I defined three @keyframes statements which instruct the visibility of each group. Than we apply the animations in which we define the duration of each frame and that they should repeat.

    /* Define keyframes for group visibility */
    @keyframes group1 {
      0%, 33.33% { opacity: 1; }
      33.34%, 100% { opacity: 0; }
    }
    @keyframes group2 {
      0%, 33.33% { opacity: 0; }
      33.34%, 66.66% { opacity: 1; }
      66.67%, 100% { opacity: 0; }
    }
    @keyframes group3 {
      0%, 66.66% { opacity: 0; }
      66.67%, 100% { opacity: 1; }
    }

    /* Apply animations to groups */
    .group1 {
      animation: group1 0.5s infinite;
    }
    .group2 {
      animation: group2 0.5s infinite;
    }
    .group3 {
      animation: group3 0.5s infinite;
    }