CSS animation of a pulsating ring

Question

I want to have an expanding radius starting at the center of the div , and not its beginning in the upper left corner of the div .

Imagine that the button has a pulsating circuit that goes out. This pulsating outline should start in the middle of the div and exit.

See an example here: https://jsbin.com/dinehoqaro/edit?html,css,output

You can see that the extension starts from the top left.

 .circle { background-color: white; border: 1px solid red; border-radius: 50%; width: 50px; height: 50px; animation: pulse 1s infinte; -webkit-animation: pulse 1.2s infinite; } button { background-color: green; border: none; border-radius: 50%; width: 50px; height: 50px; } @-webkit-keyframes pulse { from { width: 50px; height: 50px; } to { width: 100px height: 100px; } } @keyframes pulse { from { width: 50px; height: 50px; } to { width: 100px; height: 100px; } } 

 <div class="circle"><button>click here</button></div> 

Answer 1

Here's a general solution using CSS flexbox , transform, and pseudo elements .

 body { display: flex; align-items: center; justify-content: center; background-color: lightyellow; height: 100vh; margin: 0; } #container { display: flex; align-items: center; justify-content: center; } .sphere { display: flex; background: lightblue; border-radius: 300px; height: 100px; width: 100px; } #container::after { display: flex; background: lightpink; border-radius: 300px; height: 250px; width: 250px; animation: pulsate 2.5s ease-out; animation-iteration-count: infinite; opacity: 0.0; content: ""; z-index: -1; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @keyframes pulsate { 0% { transform: scale(0.1, 0.1); opacity: 0.0; } 50% { opacity: 1.0; } 100% { transform: scale(1.2, 1.2); opacity: 0.0; } } 

 <div id="container"> <div class="sphere"></div> </div> 

jsFiddle

Also see this @harry's amazing solution: How do I create an impulse animation in CSS?