0

我有一个带动画的 css3 滑块。在 2.3 版本的 Android 中不起作用。有什么办法可以解决吗？

在 2.3 和 3.0 版本中，支持部分是动画： Caniuse web 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%;}
}
4

1 回答 1

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+ 已解决此错误。

于 2013-08-01T12:02:12.980 回答