CSS3滑動圖像

我在這裏有一些簡單的CSS3動畫：http://chooseavirb.com/strat/。它們在Firefox上運行良好，但在Chrome，Safari或IE中完全不會動畫。有人能借給第二雙眼睛上的CSS，其中摘錄在這裏（供應商前綴已使用）：CSS3滑動圖像

@-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; 
}

來源

2012-11-30 Dwaynne Villiers

以下答案適合您嗎？ – spliter

只有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); } 
    }

來源

2012-11-30 14:16:31 spliter

輝煌。這正是需要的。 –

其實你應該使用translate3d（x，y，0）;以啓用GPU加速。許多設備上的動畫將會更流暢。

來源

2012-11-30 19:22:43 rauberdaniel

回答

相關問題