Search code examples
htmlcssanimationbox-shadowpulse

How to create a Pulse effect inward in CSS?

In the code below, there is a CSS Pulse animation. The effect is towards the outside of the logo. How to create the same effect towards the logo's interior ?

If possible can you show me how to do both effects :
  • from the edge of the logo inwards.
  • from inside the logo to the edge.

https://codepen.io/olam/pen/zcqea

Solution

  • You literately just flip the effect. Here goes:

    @keyframes pulse {
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  30% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  0% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

    I just switched 100% and 0% and changed 70% to 30%. Try it out. Hope this helps