在某些版本的Andr​​oid CSS3动画 [英] CSS3 animation in some android versions

问题描述

我有一个滑块CSS3动画。在2.3版本的Andr​​oid不工作。有什么办法解决呢？

在2.3和3.0版本的支持是偏向于动画：Caniuse网络 http://caniuse.com/css-动画

code的一些片段：

  .slider UL {
    宽度：1000％;
    身高：汽车;
    位置：相对;
    列表样式：无;
    左：0;
    保证金：0;
    填充：0;
    行高：0;
    -moz-动画：滑动动画15S无限;
    -webkit-动画：滑动动画15S无限;
}
.slider UL：悬停{
    -moz-动画播放状态：暂停;
    -webkit-动画播放状态：暂停;
}@ -webkit-关键帧幻灯片动画{
    1％{左：0％;不透明度：1;}
    18％{左：0％;不透明度：1}
    19％不透明度{：0.2;}
    20％{左：-100％;不透明度：1;}
    58％{左：-100％;不透明度：1;}
    59％不透明度{：0.2;}
    60％{左：-200％;不透明度：1;}
    98％{左：-200％;不透明度：1;}
    99％不透明度{：0.5;}
    100％{左：0％;}
}
 

解决方案

Android 2.3的被列为部分支持CSS3动画，因为它只支持一次改变的一个属性。解决方法是打破你的属性为单独的关键帧：

  @  -  WebKit的关键帧幻灯片{
    1％，18％，100％{左：0％; }
    20％，58％{左：-100％; }
    60％，98％{左：-200％; }
}@ -webkit-关键帧淡出{
    1％，18％，20％，58％，60％，98％{不透明度：1; }
    19％，59％{不透明度：0.2; }
    99％不透明度{：0.5; }
}.slider UL {
    ...
    -webkit-动画：15S无限;
    -webkit-动画名称：滑盖，褪色;
}
 

Android 4.0以上版本已经解决了这个bug。

• http://daneden.me/2011/12/putting -up与 - 机器人 - 废话/

I have a css3 slider with animation. In 2.3 version of Android doesn't work. Is there any way to solve it?

In 2.3 and 3.0 versions the support is partial to animation: Caniuse web http://caniuse.com/css-animation

Some fragments of code:

.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%;}
}

解决方案

Android 2.3 is listed as partially supporting CSS3 Animations because it only supports changing a single property at a time. The workaround is to break your properties into separate keyframes:

@-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+ has addressed this bug.

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

这篇关于在某些版本的Andr​​oid CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！