CSS анимация не работает в IE11 и Край

Я попытался положить свои ключевые кадры в верхней части моего CSS, а не в запросе медиа, HTTP-эквив установлен IE = Edge, и т.д.CSS анимация не работает в IE11 и Край

Это довольно простой. png изображение, используемое во время загрузки сайта с простой анимацией rotate/y, показанной в этом fiddle нижеприведенном коде.

.loader-background { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 99999999; 
 
    background-color: #eef0eb; 
 
} 
 
.loader { 
 
    position: absolute; 
 
    height: 50px; 
 
    width: auto; 
 
    top: calc(50% - 25px); 
 
    left: calc(50% - 25px); 
 
    -webkit-animation-name: loader-animate; 
 
    -webkit-animation-duration: 5s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    animation-name: loader-animate; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: infinite; 
 
} 
 
@-webkit-keyframes loader-animate { 
 
    25% { 
 
     -webkit-transform: rotatey(360deg); 
 
     transform: rotatey(360deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotatex(360deg); 
 
     transform: rotatex(360deg); 
 
    } 
 
    75% { 
 
     -webkit-transform: rotatey(0deg); 
 
     transform: rotatey(0deg); 
 
    } 
 
    100% { 
 
     -webkit-transform: rotatex(0deg); 
 
     transform: rotatex(0deg); 
 
    } 
 
} 
 
@keyframes loader-animate { 
 
    25% { 
 
     -webkit-transform: rotatey(360deg); 
 
     transform: rotatey(360deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotatex(360deg); 
 
     transform: rotatex(360deg); 
 
    } 
 
    75% { 
 
     -webkit-transform: rotatey(0deg); 
 
     transform: rotatey(0deg); 
 
    } 
 
    100% { 
 
     -webkit-transform: rotatex(0deg); 
 
     transform: rotatex(0deg); 
 
    } 
 
}

<div class="loader-background"> 
 
    <img src="https://s30.postimg.org/7dct7bspd/GTG_FB_Logo.png" class="loader"/> 
 
</div>

прекрасно работает в Chrome и FF, но не в Краю и IE11.

источник

2017-01-10 N4Design

Эта анимация ничего не делает в Firefox. – TylerH

@TylerH: он «работает» в FF, но не идеально - спасибо за исправление. Я обновил ссылку на изображение на общий хостинг, чтобы вы могли его увидеть, поэтому он вообще не работал. Изображение вращается по оси y/по вертикали, но не по оси x/горизонтально – N4Design

ОК, поэтому я сам это понял. Вам необходимо установить x ** и ** y вращение в каждом этапе определения ключевого кадра. Chrome явно лучше заполняет пробелы ... [пересмотренная скрипка] (https://jsfiddle.net/N4Design/d4v0uw36/17/). – N4Design

просто использовать Rotate (..) анимация будет немного отличаться, но он будет работать

источник

2017-01-10 12:09:39 Mifort

ОК, так что я понял это сам. Вам нужно установить поворот x и y в каждом этапе определения ключевого кадра. Хром, очевидно, лучше работает при заполнении заготовок ... revised fiddle

@-webkit-keyframes loader-animate { 
    0% { 
    -webkit-transform: rotatex(0deg) rotatey(0deg); 
    transform: rotatex(0deg) rotatey(0deg); 
    } 
    25% { 
    -webkit-transform: rotatex(0deg) rotatey(360deg); 
    transform: rotatex(0deg) rotatey(360deg); 
    } 
    50% { 
    -webkit-transform: rotatex(360deg) rotatey(360deg); 
    transform: rotatex(360deg) rotatey(360deg); 
    } 
    75% { 
    -webkit-transform: rotatex(360deg) rotatey(0deg); 
    transform: rotatex(360deg) rotatey(0deg); 
    } 
    100% { 
    -webkit-transform: rotatex(0deg) rotatey(0deg); 
    transform: rotatex(0deg) rotatey(0deg); 
    } 
} 
@keyframes loader-animate { 
    0% { 
    -webkit-transform: rotatex(0deg) rotatey(0deg); 
    transform: rotatex(0deg) rotatey(0deg); 
    } 
    25% { 
    -webkit-transform: rotatex(0deg) rotatey(360deg); 
    transform: rotatex(0deg) rotatey(360deg); 
    } 
    50% { 
    -webkit-transform: rotatex(360deg) rotatey(360deg); 
    transform: rotatex(360deg) rotatey(360deg); 
    } 
    75% { 
    -webkit-transform: rotatex(360deg) rotatey(0deg); 
    transform: rotatex(360deg) rotatey(0deg); 
    } 
    100% { 
    -webkit-transform: rotatex(0deg) rotatey(0deg); 
    transform: rotatex(0deg) rotatey(0deg); 
    } 
}

источник

2017-01-10 12:29:16 N4Design

Итак, следующая проблема заключалась в том, что она не работает полностью на мобильных устройствах, но это было просто вопрос добавления '-webkit-perspective: 500px;' в .loader-background – N4Design

CSS анимация не работает в IE11 и Край

ответ

Смежные вопросы