CSS анимация ключевых кадров не работает на мобильном даже с префиксами - PullRequest
Новая
       24

CSS анимация ключевых кадров не работает на мобильном даже с префиксами

0 голосов
/ 05 марта 2019

Я создаю простой переход между двумя фоновыми изображениями. Это прекрасно работает в настольных браузерах (кроме IE / Edge, о котором я знаю). Однако на мобильном телефоне / планшете, особенно в iOS, переход не работает должным образом, он показывает одно изображение, затем пустой экран, а затем возвращается к исходному изображению. Я использовал префиксы вендора -webkit, поэтому не уверен, что это вызывает. Любая помощь высоко ценится! 

 #section_03 .hp_background_holder {
    -webkit-animation-name: background;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    animation-name: background;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-direction: alternate;
    display:block;
    position:relative;
}
@-webkit-keyframes background {
    0% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    25% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    50% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
    100% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
}
@keyframes background {
    0% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    25% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_01.jpg?$staticlink$");}
    50% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
    100% {background-image: url("images/homepage/19_wk49/uk_wk49_hero_02.jpg?$staticlink$");}
}
...