title: How to make a sparkling button animation?
body: <p>I just found a <a href="https://github.com/frogermcs/LikeAnimation" rel="nofollow noreferrer">GitHub Repo</a>, on which there is a cool sparking animation for a <code>button</code>, but for Android.</p>
  
  <p><strong>This is the <code>Animation</code>:</strong></p>
  
  <p><img src="https://camo.githubusercontent.com/752e0e35b15b6b684cee90b6bf4309f387caa36f/687474703a2f2f66726f6765726d63732e6769746875622e696f2f696d616765732f32322f627574746f6e5f616e696d2e676966" alt="animation"></p>
  
  <p>However, I want that for my website, so I started designing that myself.</p>
  
  <p>Firstly, I <a href="https://ezgif.com/maker/ezgif-1-672b08ae8c62-gif-im/ezgif-1-672b08ae8c62.gif" rel="nofollow noreferrer">broke the gif down by frames</a>. And then, by these points I made a road map, which is what I'm following while writing code:</p>
  
  <ul>
  <li>The star gradually <code>scale()</code>s down.</li>
  <li>A small circle of orange color gradually covers the star by <code>scale()</code>ing up.</li>
  <li>Another small circle but this time of <code>background-color</code> (white, in this case), gradually covers the previous circle also by <code>scale()</code>ing up.</li>
  <li>Along with that the star also gradually <code>scale()</code>s up again by reappearing (<em>thus, I've to increase <code>z-index</code></em>), this time of orange color (<em>Indicating its selected status</em>).</li>
  <li>There are another small circles too scattered from all sides of the new star.</li>
  </ul>
  
  <p><strong>This is what I've made so far:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    transition: 0.5s;
    fill:gray;
  }
  
  svg:hover {
    animation: up-svg 1s;
    fill: darkorange;
    z-index: 1;
  }
  
  svg:hover~.svg {
    animation: up-one 0.5s;
    display: block;
  }
  
  svg:hover~.svg1 {
    animation: up-two 1s;
    display: block;
  }
  
  .svg {
    position: absolute;
    top: 0;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: orange;
    display: none;
    transform: scale(0.9);
    transition: 0.5s;
  }
  
  .svg1 {
    position: absolute;
    top: 0;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: white;
    display: none;
    transition: 0.5s;
  }
  
  @keyframes up-one {
    0% {
      transform: scale(0);
    }
    40% {
      transform: scale(0);
    }
    100% {
      transform: scale(0.9);
    }
  }
  
  @keyframes up-two {
    0% {
      transform: scale(0);
    }
    37.5% {
      transform: scale(0);
    }
    50% {
      transform: scale(0.25);
    }
    62.5% {
      transform: scale(0.5);
    }
    75% {
      transform: scale(0.75);
    }
    87.5% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes up-svg {
    0% {
      transform: scale(1);
      fill: gray;
      z-index: 0;
    }
    70% {
      transform: scale(0);
      fill: darkorange;
      z-index: 1;
    }
    100% {
      transform: scale(1);
      fill: darkorange;
      z-index: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="s-tt" class="s-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/&gt;&lt;/svg&gt;
  &lt;div class="svg"&gt;&lt;/div&gt;
  &lt;div class="svg1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried my best, but still it is not looking like the expected one, and I was stuck with that circles scattering too.</p>
  
  <p>Colors are not the priority right now. And I am sticking with the <code>hover</code> property (<em>So that the animation can be seen again and again without reloading</em>) for now until the animation is complete.</p>
  
  <p>Can anyone help me make that kind of animation?</p>