Есть анимация по ключевым кадрам для моего состояния с фокусировкой на кнопке. Проблема в том, что когда кнопка переходит в состояние фокуса, начинает воспроизводиться анимация, и эта анимация приводит к странному скачку текста кнопки.
Как предотвратить это странное шаткое и резкое поведение текста.
Спасибо !
.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>@BearNithi он проиграл мою анимацию только один раз, но я хочу играть ее бесконечно?
Чего же ты хочешь добиться с помощью анимации?






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