Текст перескакивает при воспроизведении анимации для состояния с фокусом на кнопке (button: focus)

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

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

Спасибо !

.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>

просто измените анимацию: бесконечно на 1

Bear Nithi 12.01.2019 14:55

@BearNithi он проиграл мою анимацию только один раз, но я хочу играть ее бесконечно?

Abdul Wahab 12.01.2019 15:50

Чего же ты хочешь добиться с помощью анимации?

Bear Nithi 12.01.2019 17:45
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
3
74
0

Другие вопросы по теме