css - 为按钮聚焦状态（按钮：焦点）播放动画时文本跳转

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>

标签： csshtmlanimation