Blink position icon

CSS-only demo to blink an icon using a Sprite background.

by David Iglesias

HTML

<div class="control">
  <button class="firstChild">
    <div class="secondChild">
     
    </div>
  </button>
</div>

CSS

.waiting {
  animation: 1000ms infinite step-end blink-position-icon;
}

@keyframes blink-position-icon {
  0% {
    background-position: -24px 0px;
  }
  50% {
    background-position: 0px 0px;
  }
}

/* Default styles for the button */
.control { margin-right: 10px; }
.firstChild {
  background-color: #fff;
  border: none;
  outline: none;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  padding: 8px;
}

.secondChild {
  width: 24px;
  height: 24px;
  background-image: url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png);
  background-size: 240px 24px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

JavaScript

let btn = document.querySelector('.firstChild');
let secondChild = document.querySelector('.secondChild');

btn.addEventListener('click', (event) => {
  secondChild.classList.toggle('waiting');
});