Текст переходит при воспроизведении анимации для состояния фокуса кнопки (кнопка: фокус) - PullRequest
0 голосов
/ 12 января 2019

Есть анимация ключевых кадров для моего состояния фокуса. Проблема в том, что когда кнопка находится в состоянии фокуса, анимация начинает воспроизводиться, и эта анимация приводит к странным скачкам текста кнопки.

Как предотвратить это странное шаткое и нервное поведение текста.

Спасибо!

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...