2014-09-11 3 views
0

My CSS3 анимации, кажется, отлично работает на всех устройствах, кроме этого исчезает на старом IPad/сафари, и я не знаю, почему: -анимации исчезают на Старый IPad Webkit

@-webkit-keyframes rollIn { 
0% { 
opacity: 0; 
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 
     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 
} 

100% { 
opacity: 1; 
-webkit-transform: none; 
     transform: none; 
} 
} 

@keyframes rollIn { 
0% { 
opacity: 0; 
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 
     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 
} 

100% { 
opacity: 1; 
-webkit-transform: none; 
     transform: none; 
} 
} 

.rollIn { 
-webkit-animation-name: rollIn; 
     animation-name: rollIn; 
} 

Срабатывание

a { 

         -webkit-animation: rollIn 1s linear 0s 1 forwards; 
-moz-animation: rollIn 1s linear 0s 1 forwards; 
    -o-animation: rollIn 1s linear 0s 1 forwards; 
     animation: rollIn 1s linear 0s 1 forwards; 
    } 

Анимация проходит, а затем исчезает по неизвестной причине?

Благодаря Glennyboy

+0

Какой номер версии вашего браузера? –

ответ

0

Оказывается, нет ничего плохого в CSS.

Удалось устранить это, указав, что все CSS были в одном файле (ранее отдельно), а также что аппаратное ускорение для анимации было включено. Мне нравится использовать следующую комбо: -

-webkit-transform: translate3d(0, 0, 0); 
-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 
Смежные вопросы