Denslav
@Denslav
Камрад

Почему не корректно работает анимация в safari?

Все приветствую. Вот css код
.mod-btn {
font-size: 16px;
padding: 10px 30px;
border-radius: 25px;
background-color: var(--blue);
color: #fff;
text-decoration: none;
border: 2px solid #2634ff;
}
.mod-btn:after {
position: absolute;
content: "";
background-color: #5864FF;
z-index: -1;
width: 250px;
height: 50px;
top: 50%;
left: 50%;
border-radius: 40px;
animation: glowing 1.4s infinite;
-webkit-animation: glowing 1.4s infinite;
transform: translate(-50%, -50%);
will-change: width, height, opacity, transform;
}
@keyframes glowing {
0% {
width: 250px;
height: 50px;
opacity: 1;
}
100% {
width: 300px;
height: 60px;
opacity: 0;
}
}
На iOS анимация кнопки дергается, элемент mod-btn:after сначала увеличивается в размере, а потом только срабатывает свойство opacity. За ранее всем спасибо за ответы.
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
divside
@divside
Chupapi Munyanyo
Вы считаете, что это свойство transform: translate(-50%, -50%); является причиной?

Я считаю что нагромождение ненужной фигни является причиной.

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы