title: How to create Ripple effect on Click - Material Design
body: <p>I'm new to CSS animations and I've been trying to make their animation work for the last hours by looking at their code, but I can't make it work for now.</p>
  
  <p>I'm talking about this effect: <a href="https://angular.io/">https://angular.io/</a> (menu effect).
  Basically, it's an animation on click that spreads a circle from the mouse cursor.</p>
  
  <p>Seems it comes down to these 2 lines:</p>
  
  <pre><code>transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
  transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);
  </code></pre>
  
  <p>PS: Maybe there's some jQuery I didn't see.</p>