CSS3 Скользящие изображения

Question

У меня есть несколько простых анимаций CSS3 здесь: http://chooseavirb.com/strat/. Они отлично работают на Firefox, но не ожидают вообще в Chrome, Safari или IE. Может кто-нибудь одолжить второй набор глаз на CSS, отрывок из которой здесь (Vendor-префиксы были использованы):

@-webkit-keyframes slideup { 
0% {transform: translate(0px, 0px);} 
20% {transform: translate(0px,0px);} 
25% {transform: translate(0px, -150px);} 
45% {transform: translate(0px,-150px);} 
50% {transform: translate(0px,-300px);} 
70% {transform: translate(0px,-300px);} 
75% {transform: translate(0px,-150px);} 
95% {transform: translate(0px,-150px);} 
100% {transform: translate(0px,px);} 
} 

@-moz-keyframes slideup { 
0% {transform: translate(0px, 0px)} 
20% {transform: translate(0px,0px)} 
25% {transform: translate(0px, -150px)} 
45% {transform: translate(0px,-150px)} 
50% {transform: translate(0px,-300px)} 
70% {transform: translate(0px,-300px)} 
75% {transform: translate(0px,-150px)} 
95% {transform: translate(0px,-150px)} 
100% {transform: translate(0px,px)} 
} 

@keyframes slideup { 
0% {transform: translate(0px, 0px)} 
20% {transform: translate(0px,0px) } 
25% {transform: translate(0px, -150px)} 
45% {transform: translate(0px,-150px) } 
50% {transform: translate(0px,-300px) } 
70% {transform: translate(0px,-300px)} 
75% { transform: translate(0px,-150px)} 
95% {transform: translate(0px,-150px)} 
100% {transform: translate(0px,px)} 
} 

.slideup { 
-webkit-animation-name: slideup; 
-moz-animation-name: slideup; 
-o-animation-name: slideup; 
animation-name: slideup; 
} 

Answer 1

только Firefox понимает transform without a prefix. Вам нужны префиксы не только в @keyframes, но и в тех случаях, когда вы определяете переходы. Что-то вроде этого

@-moz-keyframes slideup { 
     0% { -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); } 
     20% { -moz-transform: translate(0px,0px); transform: translate(0px,0px); } 
     25% { -moz-transform: translate(0px, -150px); transform: translate(0px, -150px); } 
     45% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     50% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     70% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     75% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     95% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     100% { -moz-transform: translate(0px,px); transform: translate(0px,px); } 
    } 
    @-webkit-keyframes "slideup" { 
     0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 
     20% { -webkit-transform: translate(0px,0px); transform: translate(0px,0px); } 
     25% { -webkit-transform: translate(0px, -150px); transform: translate(0px, -150px); } 
     45% { -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     50% { -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     70% { -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     75% { -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     95% { -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     100% { -webkit-transform: translate(0px,px); transform: translate(0px,px); } 
    } 
    @-ms-keyframes "slideup" { 
     0% { -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } 
     20% { -ms-transform: translate(0px,0px); transform: translate(0px,0px); } 
     25% { -ms-transform: translate(0px, -150px); transform: translate(0px, -150px); } 
     45% { -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     50% { -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     70% { -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     75% { -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     95% { -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     100% { -ms-transform: translate(0px,px); transform: translate(0px,px); } 
    } 
    @-o-keyframes "slideup" { 
     0% { -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } 
     20% { -o-transform: translate(0px,0px); transform: translate(0px,0px); } 
     25% { -o-transform: translate(0px, -150px); transform: translate(0px, -150px); } 
     45% { -o-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     50% { -o-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     70% { -o-transform: translate(0px,-300px); transform: translate(0px,-300px); } 
     75% { -o-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     95% { -o-transform: translate(0px,-150px); transform: translate(0px,-150px); } 
     100% { -o-transform: translate(0px,px); transform: translate(0px,px); } 
    } 
    @keyframes "slideup" { 
     0% { transform: translate(0px, 0px); } 
     20% { transform: translate(0px,0px); } 
     25% { transform: translate(0px, -150px); } 
     45% { transform: translate(0px,-150px); } 
     50% { transform: translate(0px,-300px); } 
     70% { transform: translate(0px,-300px); } 
     75% { transform: translate(0px,-150px); } 
     95% { transform: translate(0px,-150px); } 
     100% { transform: translate(0px,px); } 
    } 

Answer 2

На самом деле вам следует использовать translate3d (x, y, 0); для включения ускорения GPU. Анимации будут более гладкими на многих устройствах.