CODEWITHSUNDEEP
androidcsscss-animationsandroid-browser
user2641690
user2641690

Reputation: 25

CSS3 animation in some android versions

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

Upvotes: 0

Views: 6668

Answers (1)

André Dion
André Dion

Reputation: 21708

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.

Upvotes: 1

Related Questions