在以按钮为焦点的状态下播放动画时，文本会跳转（按钮：焦点）

Question

对于我的按钮聚焦状态，有一个关键帧动画。问题是当按钮进入焦点状态时，动画开始播放，并且动画导致按钮文本发生怪异的跳动。

如何防止这种奇怪的抖动和跳跃行为。

谢谢！

.btn-inline {
    border: none;
    color: #eb2f64;
    font-size: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    transition: all .2s;
}


.btn-inline:hover {
    color: #333333;
}

.btn-inline:focus {
    outline: none;
    animation: Pulsate 1s infinite;
}

@keyframes Pulsate {
0% {
    transform: scale(1);
    box-shadow: none;
}
50%{
    transform: scale(1.05);
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, .25);
}
100%{
    transform: scale(1);
    box-shadow: none;
}

}

<button class="btn-inline">Albufeira, Portugal</button>