Не работает css анимация

Рейтинг: 0Ответов: 1Опубликовано: 02.04.2023

Всем привет !Исользую css анимацию на сайте. Но она не работает на айфонах. В dev tools на компе отображается будто она работает , как только деплою проект она перестает работать только после рефреша страницы она начинается работать. Мой код

.about-us__img-smile1 {
   right: 155px;
   bottom: 223px;
   animation: 2s ease-in-out infinite up-down1;

}

.about-us__img-smile2 {
   right: 0;
   bottom: 0;
   animation: 2s ease-in-out infinite up-down2;

}
@keyframes up-down1 {
   0% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(10%);
   }
   100% {
      transform: translateY(0);
   }
}
@keyframes up-down2 {
   0% {
      transform: translateY(0);

   }
   50% {
      transform: translateY(-10%);
   }
   100% {
      transform: translateY(0);
   }
}

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

css html css-animation анимация
Источник: Stack Overflow на русском

Ответы

▲ 0

Скорее всего проблема в отсутствие префикса для Webkit

.about-us__img-smile1 {
  right: 155px;
  bottom: 223px;
  -webkit-animation: 2s ease-in-out infinite up-down1;
          animation: 2s ease-in-out infinite up-down1;
}

.about-us__img-smile2 {
  right: 0;
  bottom: 0;
  -webkit-animation: 2s ease-in-out infinite up-down2;
          animation: 2s ease-in-out infinite up-down2;
}

@-webkit-keyframes up-down1 {
  0% { transform: translateY(0); }
  50% { transform: translateY(10%); }
  100% { transform: translateY(0); }
}

@keyframes up-down1 {
  0% { transform: translateY(0); }
  50% { transform: translateY(10%); }
  100% { transform: translateY(0); }
}

@-webkit-keyframes up-down2 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10%); }
  100% { transform: translateY(0); }
}

@keyframes up-down2 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10%); }
  100% { transform: translateY(0); }
}

Прогонял через этот инструмент - autoprefixer