Animating SVG elements

bdYXrO.markdown

bdYXrO

A Pen by Tiffany Brown on CodePen.

License.

index.html

<button type="button">Toggle animation</button>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 497 184" xml:space="preserve">

  <g>
    <polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,106.9 
                119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,66.6 " />
    <polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,106.9 
                119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,66.6 " />
    <polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,106.9 
                119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,66.6 " />
    <polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,106.9 
                119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,66.6 " />
  </g>
</svg>

script.js

document.querySelector('button').addEventListener('click', function(e) {
            var stars = document.querySelectorAll('.star:not(:first-child)');
            [].map.call(stars, function(star) {
                if (star.classList.contains('pulse-and-fade')) {
                    star.classList.toggle('pause');   
                } else {
                    star.classList.toggle('pulse-and-fade');
                }                
            });  
        })

style.css

.star {
  fill: rgb(255, 195, 0);
  transform-origin: 50% 50%;
  /* 
  Need this because FF doesn't yet support 
  percentage-based transform origins in SVG.
  */
  -moz-transform-origin: 76px 97.15px;
}

.star:nth-of-type(2) {
  animation-delay: 250ms;
}

.star:nth-of-type(3) {
  animation-delay: 750ms;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes pulse {
  from {
    transform: scale(0.25);
  }
  to {
    transform: scale(2);
  }
}

.pulse-and-fade {
  animation: pulse 1.5s, fade 1.5s;;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

.pause {
  animation-play-state: paused;
}

g {
  transform: translateX(100px)
}