html - start - flexbox webkit

Animación de anillo pulsante con CSS

Question

Quiero tener un radio de expansión que comience desde el centro del div lugar de comenzar desde la parte superior izquierda del div .

Imagina que el botón tiene un contorno pulsante que va hacia afuera. Ese contorno pulsante debería comenzar desde el medio del div y salir.

Vea el ejemplo aquí: https://jsbin.com/dinehoqaro/edit?html,css,output

Puede ver que la expansión comienza desde la esquina superior izquierda.

.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

Aquí hay una solución general que utiliza CSS flexbox , transform y pseudoelementos .

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

También vea esta increíble solución de @harry : ¿Cómo crear una animación pulsante de anillo luminoso en CSS?