Hoqus
@Hoqus

Не отрабатывает анимация на iphone при этом на маке всё ок, почему?

Здравствуйте, вот такая простая анимация, работает везде кроме айфона и айпада, не понимаю почему так.
.main-header__button-animation {
  display: block;
  width: 3px;
  height: 10%;
  background-color: $basic-white;
  border-radius: 3px;
  animation-name: mp3;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: background-color 0.3s ease;

@keyframes mp3 {
  0% {
    height: 10%;
  }

  50% {
    height: 50%;
  }

  100% {
    height: 10%;
  }
}
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Чуть поправил, так что теперь можете оттолкнуться от моей демки.
Почему не анимировалось на iphone информации нет. Скорее всего потому что менялась высота внутри flex.
Ну и в целом анимировать высоту, так же как и ширину - считается не самым лучшим делом в вебе.
Погуглите на тему "производительные анимации". Или "свойства, безопасные для анимации".
Плюс элементы на самом деле не помещались в свой контейнер, но это было не заметно на глаз, так как флекс без врапа.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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