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

만 파이어 폭스는 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

CSS3 슬라이딩 이미지

답변

관련 문제