Я думаю тут проблема с translate, можно статично маргином отцентрировать в данном случае, и анимировать только scale.
@keyframes sk-pulseScaleOut {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}
.sk-spinner-pulse {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
margin: -30px;
background-color: #ff9800;
border-radius: 100%;
animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
<div class="sk-spinner sk-spinner-pulse"></div>
Либо указать transform-origin:
@keyframes sk-pulseScaleOut {
0% {
transform: scale(0) translate(-50%, -50%);
}
100% {
transform: scale(1) translate(-50%, -50%);
opacity: 0;
}
}
.sk-spinner-pulse {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
background-color: #ff9800;
border-radius: 100%;
transform-origin: left top;
animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
<div class="sk-spinner sk-spinner-pulse"></div>
И наконец локализация поведения - проблема в порядке трансформации - сначала translate, потом scale:
@keyframes sk-pulseScaleOut {
0% {
transform: translate(-50%, -50%) scale(0);
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
.sk-spinner-pulse {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
background-color: #ff9800;
border-radius: 100%;
animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
<div class="sk-spinner sk-spinner-pulse"></div>
Здесь фишка в том, что фактический размер элемента не меняется при scale, но менятся для трансформации.
То есть для transform размер элемента 0х0px, и он не сдвигается в центр, при этом фактический размер остается 60х60.