SOURCE

var icon = document.getElementById('icon');

icon.onclick = function(){
  this.classList.add('animate')
  this.classList.add('enabled')
};

icon.addEventListener('webkitAnimationEnd', function(){
  this.classList.remove('animate')
});

<div id="icon" class="icon"></div>

$normal: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyYmZmMDE1My1kZTA2LTQ1YTQtOWVhZi1kODEyNGNiN2YwZjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUY2RTlGRkU4ODRGMTFFNjgyNjlFMzU1NzBGMjZEOUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUY2RTlGRkQ4ODRGMTFFNjgyNjlFMzU1NzBGMjZEOUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmVkOGU2YTQtZTljZC00OTJkLWE4YmEtZDNmNTA0YjNjN2VhIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzY4NzEzNGQtY2Y1Ny0xMTc5LTliNjMtODMzZDA2ZmEyZTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dn7NMwAAA0hJREFUeNrEmFtsDFEYx89O262gLqEVl9JGQisSSsU1PAgSKbFNSkRCREikQl1S4aleXB5c64nEJV4QXQ+iQSJxC1qJe6vauFXRUFKNWGpX/Y/8T3JMdnZnp2PnS345Z3bOzP7Pme98833jCwQCwmT9wD4wHwwEKaALhMBDsANcEbFtPNgNpoLewAC/wVdwE2wCL+TAYDD4z4WG6Ual4BNYCQZRjDQf6AmmgcvgJRgbRUgWuAcegHmgj/Yfsu0PFoImcCDaTHRBFeAwSAVfwDFQCHqBUWA9aOTYXPAYXAXV5BJo4TWCfbmaBSCN7R7QygluAFVmQT4+MjnzWxzYRAFWNgOcBkMtzn8G5ZyQldWBMeyvwWM7ahbUwj94A3KEPdtGP0vjcRcfZ4XN6+tBPvgBMiAqLPh4pmizLRL2bRdxanKF2kFfsJmP868PlXPAa/BUJNfus12uO/Uk9qtE8u0Q25G6oEz2r3sgSMWz9OLiYr8S5OePDR4I+s6AKS1PCfLxh1fCG4uwzTQHRr/w1lKUIKUw3yMhqWyfKEEh/lDogZhcukwXAuMHJaiOJ5d4IKiU7Ud9259nv8ADQUvZ3tYFHaQfyTxoaxLFyIA8hP3tuiD5crvB441JFHSSbTP8p8GcD63i21omZTuTIGautqvXRUvQZFC8yP7aJAg6wbYRq3PBKmNcBn7Sl579RzFnwWC+MhbESmE7tNXJ62auY2UyoSthv1JLiS2T/ONALaHMk2a5KGYEOMP+c1AWL8lXtgi857lqi+rCidWwJAoxSxV2BclnOw58Y+lzLUZCb9eauYMjXPX2RARJa2Pg+gUGMNXMcihG7uBshpXFrNtEooJUwjYThCmmXiVRNq0HVyaHYlbIQjXeRUac83fBbG2lasFkG2KyWTSolZGB95SdWRg2xsjXygQ6YwZz7zkxxk8EjzSfKeLuFW4JEiyPRtMZ05mc748ybjW4wxq+E0znThVuC5L2lrGkicdlpogu/eMIK9k2+ltNojvASHB8B+v+c1pEb2UJrr7r1DJMOCoaDIdbuYRfQyL0leF03r10+k6nAcvoRrCrpF+944co+QVli1sZv1OTX8GG8T5hN94vhnDHwi7dR/wRYAAiJ7LGXGgdFgAAAABJRU5ErkJggg==";

$active: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyYmZmMDE1My1kZTA2LTQ1YTQtOWVhZi1kODEyNGNiN2YwZjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUY2RTlGRkE4ODRGMTFFNjgyNjlFMzU1NzBGMjZEOUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUY2RTlGRjk4ODRGMTFFNjgyNjlFMzU1NzBGMjZEOUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YTQ0MDI2YzgtZDYzZC00NWIwLTlkNTktZGZiMjk2OTU2ZjYwIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzY4NzEzNGQtY2Y1Ny0xMTc5LTliNjMtODMzZDA2ZmEyZTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+LlyIPAAAAjRJREFUeNrMmE0oBGEYx8fuHhQHDsKFi1Jy4IotpXxGESkRcVHiJFylXEThhkIJW3JzUCQcRIpSSEqh5PurhFj+Tz2vXmPNzO7O7sy/frt7mI/fPPvOM+87EcWzn4oqkaAGlINMEA+ewAlYBJPgSNFOIqgHJSCFj3EJ9sECmAB3tOFCtePXjhEqITeYAkkaJ/OCadDOJ5ETBbpBC1/Yf3kAzcCjFnJJv+lq5nQORKEj1IIiMAjexcWBJq6IXmLADFduyFeFksEubxjO0MndqNKGfLWUfgtkKE4wUuLxOmShJB7AViUd5MlC5VKlrEqFLJSjWB+3LJRmA6FUjCOnEEqwgRC1nzghFKvYI9FC6NMmQg7xcWUToQshdGoDmQd062chtGYDoXX5f1uygdCyLLQCzi2UeefpzI/QBxi1UGge4+da/bQfBvcWyFDL6flz77NMrwVCk6jOvi8hUaWDMMrQ39Tpszty3kADj6lwpBXcaAlRtkBXGGTGaIL/7/NDlQEa+SGU2eHqKEaFvkAd2AyBDPW7MvDqjxDlBZSCYxNlbkGxXhN26NwFeSY9fB9BIdgzNAfRCMnkBlkpqkw+2DY8KdLJCS8EdgOQOeN9t/yapRnIJVdq1Q+ZQ5DN34rZQmIcFIBxA9vSW5IsrpASKiHRzRtBm0ZH7+MXFwE9rANdsQ7zHShXgASqQEcwCwdXEHcPTX0z6GUBr6nqzGgRriD3p7dglVxpr2lrIRPiNek4yrcAAwCDYnjDBP9Y0gAAAABJRU5ErkJggg==";


.icon{
  width: 36px;
  height: 36px;
  margin: 50px;
  background: url($normal);
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.animate{
  -webkit-animation: mate 1 1.03s ease normal;
}

.enabled{
    background: url($active);
}
  
@-webkit-keyframes mate{
    0%{
      -webkit-transform: scale(1);
      background: url($normal);
    }
    
    40%{
      -webkit-transform: scale(1.2);
      background: url($normal);
    }
    
    60%{
      -webkit-transform: scale(0.5);
        background: url($normal);
    }
    
    100%{
      -webkit-transform: scale(1);
      background: url($active);
    }
}