某些android版本的CSS3動畫

Question

我有一個帶有動畫的css3滑塊。在2.3版本的Android不起作用。有什麼辦法解決它？

在2.3和3.0版本的支持是偏動畫：Caniuse幅http://caniuse.com/css-animation

一些代碼片段：

.slider ul { 
    width: 1000%; 
    height: auto; 
    position: relative; 
    list-style: none; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    line-height: 0; 
    -moz-animation:slide-animation 15s infinite; 
    -webkit-animation:slide-animation 15s infinite; 
} 


.slider ul:hover { 
    -moz-animation-play-state:paused; 
    -webkit-animation-play-state:paused; 
} 

@-webkit-keyframes slide-animation { 
    1% {left: 0%; opacity: 1;} 
    18% {left: 0%; opacity: 1} 
    19% {opacity: 0.2;} 
    20% {left: -100%; opacity: 1;} 
    58% {left: -100%; opacity: 1;} 
    59% {opacity: 0.2;} 
    60% {left: -200%; opacity: 1;} 
    98% {left: -200%; opacity: 1;} 
    99% {opacity: 0.5;} 
    100% {left: 0%;} 
} 

Answer 1

Android 2.3的被列爲部分地支撐CSS3動畫，因爲它僅支持改變單一財產一次。解決方法是將您的屬性分爲不同的關鍵幀：

@-webkit-keyframes slide { 
    1%, 18%, 100% { left: 0%; } 
    20%, 58% { left: -100%; } 
    60%, 98% { left: -200%; } 
} 

@-webkit-keyframes fade { 
    1%, 18%, 20%, 58%, 60%, 98% { opacity: 1; } 
    19%, 59% { opacity: 0.2; } 
    99% { opacity: 0.5; } 
} 

.slider ul { 
    ... 
    -webkit-animation: 15s infinite; 
    -webkit-animation-name: slide, fade; 
} 

Android 4.0+已解決此錯誤。

• http://daneden.me/2011/12/putting-up-with-androids-bullshit/